vuecli2升级vuecli4

package.json

vue-cli-service serve 是vuecli4自带的启动本地开发环境的命令
vue-cli-service build 是vuecli4自带的打包命令
--mode dev配合.env.dev文件可以改变NODE_ENV的值

  "scripts": {
    "serve-dev": "vue-cli-service serve --mode dev",
    "serve-test": "vue-cli-service serve --mode test",
    "build": "vue-cli-service build",
    "build-dev": "vue-cli-service build  --mode dev",
    "build-test": "vue-cli-service build  --mode test",
    "build-test-analyzer": "vue-cli-service build  --mode testAnalyzer"
  }

.env.dev （这是完整的文件名）

NODE_ENV=dev

vue.config.js可以替换默认配置

1、devServer

devServer:{
    proxy: process.env.NODE_ENV //通过NODE_ENV判断不同环境的跨域代理
  }

2、chainWebpack

  chainWebpack: config => {
      config
          .plugin('define')
          .tap(args => {//DefinePlugin
              Object.assign(args[0],process.env.NODE_ENV //通过NODE_ENV判断不同环境的常量
              return args
          })
      if(process.env.NODE_ANALYZER){//通过NODE_ANALYZER判断是否启用性能检测
          config
          .plugin('webpack-bundle-analyzer')
          .use(require('webpack-bundle-analyzer').BundleAnalyzerPlugin)
          .end();
      }
  }

配置px转rem

1、postcss.config.js，将所有样式文件的(propList: ['*'])像素转为rem，基准值（rootValue）为37.5
设计稿宽度x，基准值y，转换后样式尺寸x/y（rem）

module.exports = {
    plugins: {
      'autoprefixer': {
      },
      'postcss-pxtorem': {
        rootValue: 37.5,//结果为：设计稿元素尺寸/37.5，比如元素宽375px,最终页面会换算成 10rem
        propList: ['*']
      }
    }
}

2、flexible.js判断终端宽度并设置根节点（html）的front-size，因当前页面上的尺寸单位都为rem，整个页面的尺寸会根据根节点的变化而变化，换而言之，整个页面的尺寸变化根据终端宽度而变化。
屏幕宽度a，根节点front-size为b；因设计稿宽度等于屏幕宽度，因1rem1front-size=;(x/y)b=a

//在main.js中引入
import './util/flexible.js';