共计 1349 个字符，预计需要花费 4 分钟才能阅读完成。
前言
由于目前我在公司已经搭建了 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 的环境变量和模式特性来支持多环境配置打包。
在项目根目录添加环境变量文件
新增开发环境文件.env.dev，内容如下：
NODE_ENV = ‘dev’
MOCK = true
BASE_URL= ‘/’
新增测试环境文件.env.test，内容如下：
NODE_ENV = ‘test’
MOCK = false
BASE_URL= ‘/test’
新增生产环境文件.env.prod，内容如下：
NODE_ENV = ‘prod’
MOCK = false
BASE_URL= ‘/prod’
环境变量文件中各个属性的用途如下：
NODE_ENV 为对应的环境
MOCK 为是否引入 mock.js 文件的标识
BASE_URL 为前端项目访问时的相对地址
修改 package.json
修改 scripts 的 dev 和 build，修改后内容如下：
“scripts”: {
“dev”: “vue-cli-service serve –open –mode dev”,
“build:test”: “vue-cli-service build –mode test”,
“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 为开发环境打包
修改 vue.config.js 文件
修改 BASE_URL（此参数控制的是前端项目访问时的相对地址），改为从环境变量中获取，内容如下：
const BASE_URL = process.env.BASE_URL
修改 src/config/index.js 文件
修改 baseUrl，改为多个后端 API 接口的配置，内容如下：
baseUrl: {
dev: ‘http://localhost:8081’,
test: ‘http://www.test.com’,
prod: ‘http://www.prod.com’
},
修改 src/libs/api.request.js 文件
修改 baseUrl（对应后端 API 接口的地址），改为根据环境变量获取对应的 URL，内容如下：
const baseUrl = config.baseUrl[process.env.NODE_ENV]
修改 src/main.js 文件
修改 mock 包引入判断，改为从环境变量中获取，内容如下：
if (process.env.MOCK) require(‘@/mock’)
参考资料
https://cli.vuejs.org/zh/guid…
https://github.com/vuejs/vue-…