2020-01-17 Vue-cli-3 build serve

实际项目开发中，经常会有测试环境和生产环境，不同环境的域名是不一致的，因为build构建打包时，process.env.NODE_ENV默认是production的生产环境，所以我们每次build和serve都要手动更改请求域名。

1. 在项目根目录下创建两个.env的文件

.env.build //生产环境
.env.test   //测试环境

image.png

• .env.build填入如下内容

NODE_ENV = 'production'

VUE_APP_CURRENTMODE = 'production'    // 用于接口判断环境，可自行设置，接口判断对应字段即可

outputDir = 'admin'        // 正式环境build时的文件夹名称

• .env.test填入如下内容

NODE_ENV = 'production'

VUE_APP_CURRENTMODE = 'test'   // 用于接口判断环境，可自行设置，接口判断对应字段即可

outputDir = 'test'        // 正式环境build时的文件夹名称

2. 域名根据变量【VUE_APP_CURRENTMODE】 来区分:

image.png

let baseURL; // 默认测试环境

if (process.env.VUE_APP_CURRENTMODE == 'production') {// 正式
  baseURL = 'https://api.admin.com/platform/'
} else if(process.env.VUE_APP_CURRENTMODE == 'test') (// 测试
  baseURL = 'http://api.test.com/platform/'
)
export default {
  baseURL
};

3.在package.json里面配置运行脚本：

"serve": "vue-cli-service serve --mode build",
"serve-test": "vue-cli-service serve --mode test",
"build": "vue-cli-service build --mode build",
"build-test": "vue-cli-service build --mode test",

image.png

4.build生成不同的目录需要再vue.config.js里面配置【outputDir】

关于vue.config.js相关的配置不做过多的讲解了，可自行阅读vueCli官网文档

outputDir: process.env.outputDir,      // 当build时生成的文件夹和env里面设置的outputDir值为

image.png

5.以上配置完成，执行相关命令即可。

• 调试运行

npm run serve    // 运行正式环境
npm run serve-test  // 运行测试环境

• 打包

npm run build    //打包正式环境
npm run build-test    //打包测试环境

本文参考文档：https://blog.csdn.net/qq_37639389/article/details/97789966