vue-cli3 配置开发与测试环境详解

VUE_APP_URL = '/' // 用来设置项目的 baseUrl 和路由的 base 选项 默认是根目录
VUE_APP_MODE = '' // 设置一个变量 区分线上生产环境和线上测试环境 默认是生产环境
outputDir = 'dist' // 用来设置打包后生成的文件夹的名字，默认为 dist 文件夹

NODE_ENV = 'production' // 因为是打包项目 所以 NODE_ENV 还是 production
VUE_APP_URL = '/test/' // 线上测试环境，部署在 test 目录下 
VUE_APP_MODE = 'test' // 这个变量表示当前是线上测试环境
outputDir = 'beta'  // 将线上测试环境打包后生成的代码放在 beta 文件夹下，以示区别。

// router.js
export default new Router({
 base: process.env.VUE_APP_URL,
 ...
})

// vue.config.js
module.exports = {
 baseUrl: process.env.VUE_APP_URL, // 从 Vue CLI 3.3 起已弃用，改成publicPath
}

if(process.env.VUE_APP_MODE == 'test'){
 this.name = '线上测试用户'
}

{
 "scripts": {
  ...
  "beta": "vue-cli-service build --mode beta"
 }
}

{
 "scripts": {
  ...
  "beta": "vue-cli-service build --mode beta",
  "publish": "vue-cli-service build && vue-cli-service build --mode beta"
 }
}

npm install filemanager-webpack-plugin -dev

let ts = Date.parse(new Date());
module.exports = {
 ...,
 chainWebpack: (config) => {
    if(process.env.VUE_APP_MODE == 'test'){
   config.plugin('compress')
    .use(FileManagerPlugin, [{
     onEnd: {
      delete: [ //首先需要删除项目根目录下的dist.zip
      './*.zip',
      ],
      archive: [ //然后我们选择dist文件夹将之打包成dist.zip并放在根目录
      {source: './dist', destination: `./biProject-${ts}-production.zip`},
      {source: './beta', destination: `./biProject-${ts}-test.zip`}
      ]
     }
    }])
  }
 }
}

publicPath: process.env.NODE_ENV === 'production' ? 'https://cdn.xxx.com/folder' : '';