vue 打包_前端Vue项目自动区分环境打包

​

​

新项目开始很长时间了，对于前端Vue项目一直没管理。随着问题的增多，再有就是自动化运维的需要。急迫需要调整下几个Vue项目的多环境自动打包问题。

版本

vue/cli-service: ^3.5.3

基于这个版本，原生支持development、production，但是我们要求要有test，于是就开始了改造，其实比我想象的要简单，主要一下几个地方。

项目根目录下增加环境文件

.env.developmentNODE_ENV = 'development'VUE_APP_CURRENTMODE = 'development'.env.testNODE_ENV = 'development'VUE_APP_CURRENTMODE = 'test'.env.productionNODE_ENV = 'production'VUE_APP_CURRENTMODE = 'production'

main.js增加环境判断

...switch (process.env.VUE_APP_CURRENTMODE) {  // 根据NODE_ENV来判断当前环境 case 'development': //dev 开发环境 Vue.prototype.YBL_GLOBAL = { apiUrl: 'https://dev.api.nealma.com/', } break case 'test': //test 测试环境 Vue.prototype.YBL_GLOBAL = { apiUrl: 'https://test.api.nealma.com/', } break case 'production': //prod 生产环境 Vue.prototype.YBL_GLOBAL = { apiUrl: 'https://api.nealma.com/', } break default: Vue.prototype.YBL_GLOBAL = {} } ...

package.json修改"scripts"

"scripts": {

"serve-dev": "vue-cli-service serve --mode development