vue配置多环境方案_vue 多环境-优快云博客

本文链接：https://blog.youkuaiyun.com/ZT_KEBEI/article/details/126833322

本文介绍了如何在Vue.js项目中配置不同环境（开发、测试、生产），包括.env文件的创建、vue.config.js的设置以及package.json中脚本的定义，实现根据不同环境执行不同的操作。此外，还展示了如何进行代理配置以解决跨域问题。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >


//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{
    //生产环境下的执行操作
}