脚本宝典收集整理的这篇文章主要介绍了iview-admin多环境配置打包,脚本宝典觉得挺不错的,现在分享给大家,也给大家做个参考。
由于目前我在公司已经搭建了Jenkins
来进行一键系统发布,同时存在测试和生产两套环境。但是目前iview-admin
是不支持的,只好自己进行改造了。
PS:iview-admin
版本为2.1.0
iview-admin 2.1.0
比起iview-admin 2.0.0
,移除了config
目录且将vue-cli
升级到3.0
。
所以可以使用vue-cli 3.0
的环境变量和模式特性来支持多环境配置打包。
PS:development
、test
和production
是NODE_ENV
的默认环境变量,所以不能使用。
.env.dev
,内容如下:NODE_ENV = 'dev'
VUE_APP_ENV = 'dev'
VUE_APP_MOCK = true
BASE_URL= '/'
.env.beta
,内容如下:NODE_ENV = 'production'
VUE_APP_ENV = 'test'
VUE_APP_MOCK = false
BASE_URL= '/test'
.env.prod
,内容如下:NODE_ENV = 'production'
VUE_APP_ENV = 'prod'
VUE_APP_MOCK = false
BASE_URL= '/prod'
环境变量文件中各个属性的用途如下:
NODE_ENV
使用的是production
的打包配置VUE_APP_ENV
是因为如果要替换src
目录下文件中的某个参数则要以VUE_APP_
开头,这个参数为对应的环境VUE_APP_MOCK
为是否引入mock.js
文件的标识BASE_URL
为前端项目访问时的相对地址修改scripts
的dev
和build
,修改后内容如下:
"scripts": {
"dev": "vue-cli-service serve --open --mode dev",
"build:test": "vue-cli-service build --mode beta",
"build:prod": "vue-cli-service build --mode prod",
"lint": "vue-cli-service lint",
"test:unit": "vue-cli-service test:unit",
"test:e2e": "vue-cli-service test:e2e"
},
修改后的指令
npm run dev
为开发调试npm run build:test
为测试环境打包npm run build:prod
为开发环境打包修改BASE_URL
(此参数控制的是前端项目访问时的相对地址),改为从环境变量中获取,内容如下:
const BASE_URL = process.env.BASE_URL
修改baseUrl
,改为多个后端API接口的配置,内容如下:
baseUrl: {
dev: 'http://localhost:8081',
test: 'http://www.test.com',
prod: 'http://www.prod.com'
},
修改baseUrl
(对应后端API接口的地址),改为根据环境变量获取对应的URL
,内容如下:
const env = process.env.VUE_APP_ENV
const baseUrl = config.baseUrl[env]
修改mock
包引入判断,改为从环境变量中获取,内容如下:
if (process.env.VUE_APP_MOCK) require('@/mock')
以上是脚本宝典为你收集整理的iview-admin多环境配置打包全部内容,希望文章能够帮你解决iview-admin多环境配置打包所遇到的问题。
本图文内容来源于网友网络收集整理提供,作为学习参考使用,版权属于原作者。
如您有任何意见或建议可联系处理。小编QQ:384754419,请注明来意。