vue-cli3使用

vue-cli3是将webpack相关的设置融为一体，所以安装的依赖会更少。那怎样区分生产、开发、以及测试环境呢，以及在本地开发过程中端口号的设置？

package.json中设置

"scripts": {
    "serve": "vue-cli-service serve ",
    "dist": "release=false vue-cli-service build --mode test",
    "release": "release=true vue-cli-service build"
  },

新增.env.development，开发环境

NODE_ENV = 'development'
VUE_APP_MODE = 'development'
VUE_APP_API_URL = '....'

新增.env.test，测试环境

NODE_ENV = 'production'
VUE_APP_MODE = 'test'
VUE_APP_API_URL = '....'

新增.env.production，生产环境

NODE_ENV = 'production'
VUE_APP_MODE = 'production'
VUE_APP_API_URL = '...'

通过process.env.VUE_APP_MODE可访问当前的环境类别。

本地开发中配置 vue.confog.js

const $path = {
  "cdn_path_dist" : "..",
   "cdn_path_release" : ".."
}
const distConfig = {
  publicPath: $path.cdn_path_dist,
}
const releaseConfig = {
  publicPath: $path.cdn_path_release,
  outputDir:'release',
  productionSourceMap:false
}
if(process.env.release) {
  module.exports = process.env.release === 'true' ? releaseConfig:distConfig
} else {
  module.exports = {
    devServer: {
      port: '3008',
      host: '0.0.0.0',
      disableHostCheck: true,
    }
  }
}

vue-cli2和vue-cli3的区别：
命令不一样
.env.production的配置，可以通过process.env来访问对应的环境
vue-cli3将webpack的配置统一集成在vue-cli-server中，通过vue.config.js配置对应的参数