vue-cli3相关

此时做的一个vue-cli3项目build后，app.js达到了10M，主要为elementui、quill等组件；

最开始使用“compression-webpack-plugin”插件根据网上的说法 npm run build --report 随后访问 localhost:8888既可以访问，试了好几次都没法访问，后来点开“dist”发现里面多了一个report的html文件，直接在浏览器就可以静态预览

 

后来优化找过很多都是vuecli2的，无意中发现一篇帖子：【Vue CLI 2&3 下的项目优化实践 —— CDN + Gzip + Prerender】以及其github的基于vue-cli2和vue-cli3的优化，加载速度非常块的就展现了，从最开始的44s现在只需要3s

备注：此处vue-cli3的时候不要按照帖子里说的卸载vue等；另外可能会报错关于【sass-resources-loader】的错误，我这边是一些语法报错，没有开启eslint，我在使用的时候直接卸载移除了这块代码；

在对于环境配置的时候参考了【vue-cli3.0 环境变量与模式】

 

 在vue-cli3+使用Autoprefixer后报错：

Replace Autoprefixer browsers option to Browserslist config.
  Use browserslist key in package.json or .browserslistrc file.

  Using browsers option cause some error. Browserslist config 
  can be used for Babel, Autoprefixer, postcss-normalize and other tools.

  If you really need to use option, rename it to overrideBrowserslist.

  Learn more at:
  https://github.com/browserslist/browserslist#readme
  https://twitter.com/browserslist

解决方法：借鉴===》https://blog.csdn.net/qq_37942845/article/details/95047372

在vue-config.js中：如果不存在此js自己新建

module.exports = {

css: {
    loaderOptions: {
      postcss: {
        plugins: [
          require('postcss-pxtorem')({ // 把px单位换算成rem单位
            rootValue: 32,
            unitPrecision: 5, // 最小精度，小数点位数
            propList: ['*', '!font*'], // !不匹配属性（这里是字体相关属性不转换）
            selectorBlackList: [],
            minPixelValue: 2 // 替换的最小像素值
          }),
          require('autoprefixer')({
            // browsers: ['Android >= 4.0', 'iOS >= 7'] ==>修改为下面
            overrideBrowserslist: [
              'Android 4.1',
              'iOS 7.1',
              'Chrome > 31',
              'ff > 31',
              'ie >= 8'
            ]
          })
        ]
      }
    }
  }
}