如何判断Vue.js环境为开发或生产环境并自动配置Axios baseURL？

这问题我之前做Vue项目时也碰到过，其实不用自己写判断逻辑，Vue官方已经提供了一套成熟的环境变量机制，完美解决你这个需求，一步步来：

1. 根目录创建环境变量文件 #

在项目根目录下创建两个（或多个，按需）环境配置文件：

• .env.development：对应开发环境（npm run serve时生效）
• .env.production：对应生产环境（npm run build时生效）

分别在文件里配置你的API地址，注意变量名必须以VUE_APP_开头，Vue才会将其注入到项目中：

# .env.development 文件内容
VUE_APP_BASE_API=http://localhost:8000
VUE_APP_APP_ORIGIN=http://localhost:8000/

# .env.production 文件内容
VUE_APP_BASE_API=http://103.20.32.16:8000/
VUE_APP_APP_ORIGIN=http://103.20.32.16:8000/

2. 修改Axios配置文件 #

把你原来的dev.NODE_ENV替换成Vue自动提供的process.env对象，直接读取环境变量即可：

AxiosConfig:{ 
  baseURL: process.env.VUE_APP_BASE_API, 
  responseType: "json", 
  withCredentials: true,
  // 其他原有配置...
}

3. 验证效果 #

• 执行npm run serve启动开发服务时，项目会自动加载.env.development里的变量，Axios的baseURL就是开发环境的http://localhost:8000
• 执行npm run build打包生产版本时，会自动切换到.env.production的配置，打包后的项目直接使用生产环境的API地址，完全不用手动修改！

额外小技巧 #

如果需要测试环境，你可以新增.env.test文件，然后在package.json的scripts里添加一条命令：

"scripts": {
  "build:test": "vue-cli-service build --mode test"
}

执行npm run build:test时，就会加载.env.test里的配置啦~

内容的提问来源于stack exchange，提问作者qg_java_17137