iview-admin多環境配置打包

測試技術 · 發表 2019-03-06 14:34:59

摘要：前言由於目前我在公司已經搭建了Jenkins 來進行一鍵系統釋出，同時存在測試和生產兩套環境。但是目前iview-admin 是不支援的，只好自己進行改造了。 PS：iview-admin 版本為2.1.0 改造方案 i...

前言

由於目前我在公司已經搭建了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 的環境變數和模式特性來支援多環境配置打包。

在根目錄新增環境變數檔案

新增開發環境檔案.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')