vue——vue-cli3项目打包时区分环境以及环境变量undefined问题解决

参考：vue-cli3实现分环境打包步骤（给不同的环境配置相对应的打包命令） - ฅ˙-˙ฅ - 博客园 (cnblogs.com)

　　    模式和环境变量 | Vue CLI (vuejs.org)

　　　Vue cli3.0环境配置所遇到的问题_BertKing的专栏-CSDN博客

 

我的情况：除了开发环境development和生产环境production外，还有一个测试环境test，需要在打包时进行区分，修改请求地址

 

前言

在vue-cli3的项目中，

npm run serve时会把process.env.NODE_ENV设置为‘development’；

npm run build 时会把process.env.NODE_ENV设置为‘production’；

此时只要根据process.env.NODE_ENV设置不同请求url就可以很简单的区分出本地和线上环境。

注意：

其实通过改变process.env.NODE_ENV值区分打包环境是有问题的，因为webpack打包时针对process.env.NODE_ENV===‘production’和其他情况打出来的包结构和大小都不一样；

为了消除这种差异，可以使用其他变量比如process.env.VUE_APP_TITLE来区分环境

 

区分环境

1.修改packge.json文件

{
  ···
  "scripts": {
    "serve": "vue-cli-service serve", // 本地运行，会把process.env.NODE_ENV设置为‘development’
    "buildTest": "vue-cli-service build --mode test", // 注意，这里 “--mode 名字“ 要和步骤2中文件名“.env.名字”名字保持一致
    "build": "vue-cli-service build --mode production" 
  },
  "dependencies": {
     ···    
  },
  ···
}

 

2.在项目根目录（注意一定要是根目录下，不是src下）添加文件“.env.test”和“.env.production”（注意不是js文件），其内容分别为：

.env.test

NODE_ENV=production
VUE_APP_TITLE=test

.env.production

NODE_ENV=production
VUE_APP_TITLE=production

NODE_ENV=production是为了确保测试环境和生产环境打出来的包结构和大小都一样

VUE_APP_TITLE是环境变量，只有以 VUE_APP_  开头的变量会被 webpack.DefinePlugin 静态嵌入到客户端侧的包中

 

3.二次封装axios根据环境变量修改请求地址

...

// 环境的切换
let apiBaseUrl = '';
switch (process.env.VUE_APP_TITLE) {
  case 'production':
    apiBaseUrl = 'xxx'
    break
  case 'test':
    apiBaseUrl = 'xxx'
    break
  default:
    apiBaseUrl = 'xxx'
    break
}
// 创建 axios 实例
const service = axios.create({
  baseURL: apiBaseUrl,
  timeout: 9000, // 请求超时时间
})

...

 

4.打包

执行命令：npm run build   打生产环境包

执行命令：npm run buildTest   打测试环境包

 

出现的问题

执行console.log(process.enc.WUE_APP_TITLE)，控制台打印为undefined

原因：.env.test和.env.production文件未放在根目录下