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的默認環境變量，因此不能使用。

1. 新增開發環境文件.env.dev，內容以下：

   NODE_ENV = 'dev'
   VUE_APP_ENV = 'dev' 
   VUE_APP_MOCK = true
   BASE_URL= '/'

2. 新增測試環境文件.env.beta，內容以下：

   NODE_ENV = 'production'
   VUE_APP_ENV = 'test'
   VUE_APP_MOCK = false
   BASE_URL= '/test'

3. 新增生產環境文件.env.prod，內容以下：

   NODE_ENV = 'production'
   VUE_APP_ENV = 'prod'
   VUE_APP_MOCK = false
   BASE_URL= '/prod'

環境變量文件中各個屬性的用途以下：

1. NODE_ENV使用的是production的打包配置
2. VUE_APP_ENV是由於若是要替換src目錄下文件中的某個參數則要以VUE_APP_開頭，這個參數爲對應的環境
3. VUE_APP_MOCK爲是否引入mock.js文件的標識
4. BASE_URL爲前端項目訪問時的相對地址

修改package.json

修改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"
    },

修改後的指令

1. npm run dev爲開發調試
2. npm run build:test爲測試環境打包
3. 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 env = process.env.VUE_APP_ENV
    const baseUrl = config.baseUrl[env]

修改src/main.js文件

修改mock包引入判斷，改成從環境變量中獲取，內容以下：

if (process.env.VUE_APP_MOCK) require('@/mock')

參考資料

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