vue常见问题

发表于 | 分类于
vue-cli3全局引入less函数

问题：开发环境每个页面的less互不影响，所以要使用less函数需要每个页面都要引入less函数（即使在main.js引入都没用。）

1
2
3
4
5
6
7
8
9
10
11
// 安装插件：style-resources-laoder vue-cli-plugin-style-resources-loader
yarn add style-resources-loader vue-cli-plugin-style-resources-loader --dev

// vue.config.js
// 找到生成的代码，配置路径
pluginOptions: {
    'style-resources-loader': {
      preProcessor: 'less',
      patterns: [path.resolve(__dirname, './src/assets/less/index.less')] // 此为配置路径
    }
  }
vue-cli2 全局引入less函数
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
npm install sass-resources-loader --save-dev

// build/utils.js
// exports.cssLoaders = function (options) {}中加入函数:
function lessResourceLoader() {
    var loaders = [
        cssLoader,
        'less-loader',
        {
            loader: 'sass-resources-loader',
            options: {
                resources: [
                    path.resolve(__dirname, '../src/assets/styles/common.less'),
                ]
            }
                    }
    ];
    if (options.extract) {
        return ExtractTextPlugin.extract({
            use: loaders,
            fallback: 'vue-style-loader'
        })
    } else {
        return ['vue-style-loader'].concat(loaders)
    }
}

// function generateLoaders (loader, loaderOptions)的函数中修改return一条配置
return {
    css: generateLoaders(),
    postcss: generateLoaders(),
    // less: generateLoaders('less'), 修改前
    less: lessResourceLoader('less'), // 修改后
    sass: generateLoaders('sass', { indentedSyntax: true }),
    scss: generateLoaders('sass'),
    stylus: generateLoaders('stylus'),
    styl: generateLoaders('stylus')
  }
vue项目打包后首页一片空白

1、第一种：打包后的dist目录下的文件引用路径不对，会因找不到文件而报错导致白屏

1
2
3
4
5
6
7
8
9
10
// vue-cli2的config.js
module.exports = {
  build: {
    assetsPublicPath: '/'
  }
// assetsPublicPath默认的是  ‘/’  也就是根目录。而我们的index.html和static在同一级目录下面。  所以要改为  ‘./ ’

// vue-cli3的vue.config.js
module.exports = {
  publicPath: './',

2、第二种：由于把路由模式mode设置成history了，默认是hash
路由配置默认模式是hash，并没有问题，但是换成history，需要在服务端加一条：如果URL匹配不到任何静态资源，则应该返回一个index.html。
官方配置

1
2
3
4
5
6
// 服务端ngnix配置
location /jiufan {
  root /home/jiufan/application/jiufanH5/dist;
  try_files $uri $uri/ /jiufan/index.html; // 重要
  index index.html index.html
}