iview-admin多环境配置打包

前言

由于目前我在公司已经搭建了 Jenkins 来进行一键系统发布，同时存在测试和生产两套环境。但是目前 iview-admin 是不支持的，只好自己进行改造了。

PS： iview-admin 版本为 2.1.0

改造方案

iview-admin 2.1.0 比起 iview-admin 2.1.0 ，移除了 config 目录且将 vue-cli 升级到 3.0 。

所以可以使用 vue-cli 3.0 的环境变量和模式特性来支持多环境配置打包。

在根目录添加环境变量文件

1. 新增开发环境文件 .env.dev ，内容如下：

NODE_ENV = 'dev'
MOCK = true
BASE_URL= '/'

1. 新增测试环境文件 .env.test ，内容如下：

NODE_ENV = 'test'
MOCK = false
BASE_URL= '/test'

1. 新增生产环境文件 .env.prod ，内容如下：

NODE_ENV = 'prod'
MOCK = false
BASE_URL= '/prod'

环境变量文件中各个属性的用途如下：

1. NODE_ENV 为对应的环境
2. MOCK 为是否引入 mock.js 文件的标识
3. 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')

参考资料

1. https://cli.vuejs.org/zh/guid...
2. https://github.com/vuejs/vue-...