vue配置多环境方案

//1、根目录下新建文件：.env.development（开发环境）、.env.test（测试环境）、.env.production文件（生产环境）

.env.development（开发环境）配置内容
NODE_ENV = 'development'  //模式
VUE_APP_MODE = 'development'  //通过"VUE_APP_MODE"变量来区分环境
VUE_APP_BASE_URL = '/api' //api地址

.env.test（测试环境）配置内容
NODE_ENV = 'test'
VUE_APP_MODE = 'test'
VUE_APP_BASE_URL = 'http://xxx.xxx.xxx.xx:8008/'
//打包输出目录
outputDir = dist-test

.env.production文件（生产环境）配置内容
NODE_ENV = 'production'
VUE_APP_MODE = 'production'
VUE_APP_BASE_URL = 'http://xxx.xxx.xxx.xx:8008/'
outputDir = dist-production

//2.修改vue.config.js
console.log(process.env.VUE_APP_BASE_URL)//打印环境
module.exports = {
    // 基本路径,相对路径
    publicPath: "./",
    // 输出文件目录
    outputDir: process.env.outputDir,
    productionSourceMap:process.env.NODE_ENV==='production'?false:true,//生产环境下设置source map为false加速构建
    devServer:{
      proxy:{
         '/api':{
           target:'xxxx',//开发环境下代理接口
           changeOrigin:true,//开启跨域
           ws:false,//websocket不支持
           pathRewrite:{
               '^/api':''        //置空  
           }
         }
      }
    }
}

//3.配置package.json     (执行对应的npm run xxx)
"scripts"：{
    //打包开发环境
    "serve":"vue-cli-service build --mode development",
    //打包生产环境    
    "build":"vue-cli-service build --mode production",
    //打包测试环境
    "test": "vue-cli-service build --mode test", 
    "lint":"vue-cli-service lint"
}
  ----------------------------------------- 
   // 4.判断并使用不用的开发环境配置
if(process.env.VUE_APP_MODE==='development'){
    //开发环境下的执行操作
}else if(process.env.VUE_APP_MODE==='test'){
    //测试环境下的执行操作
}else{
    //生产环境下的执行操作
}