![eac95581e99bbb026aa19f2fd7c7db91.png](https://i-blog.csdnimg.cn/blog_migrate/5f4fc7cf41834f5290af1c0ba4b7e708.jpeg)
新项目开始很长时间了,对于前端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