一、前言

通常 vue 在本地啟動(dòng)時(shí)，訪問的后端地址是同事的機(jī)器或者線上一個(gè)環(huán)境(通常叫開發(fā)環(huán)境)。假如服務(wù)器有多個(gè)環(huán)境：開發(fā)、測試、培訓(xùn)、生產(chǎn)……這樣每次發(fā)版前，都要手動(dòng)在 git 倉庫修改后端地址，就很麻煩。

所以想要實(shí)現(xiàn)一個(gè)目的：不修改代碼，通過執(zhí)行不同命令，發(fā)布不同環(huán)境

二、實(shí)現(xiàn)思路

僅針對 npm run build 打包后放到服務(wù)器運(yùn)行的項(xiàng)目，對于直接把源碼放在服務(wù)器執(zhí)行 npm run dev 的項(xiàng)目，參照本文思路，修改 build / webpack.dev.conf.js 文件中，process.env 的賦值過程即可。

把不同服務(wù)的地址都配置出來，發(fā)布不同環(huán)境時(shí)，執(zhí)行不同腳本，這樣來獲取相應(yīng)的地址。

三、實(shí)踐

1. 獲取axios請求地址

process 是 Vue 中一個(gè)全局變量，利用這一點(diǎn)，我們可以從它上邊取服務(wù)器地址，賦值給 baseURL，取到后既可以封裝到 axios 中，也可以作為他用。代碼如下：

const baseURL = process.env.BASE_API;        // BASE_API是我們自定義的一個(gè)屬性，名稱隨意，只要保證所有地方一致就行

至于在哪里定義 BASE_API ，下面步驟會(huì)講到。

2. 配置不同服務(wù)器的地址

2.1 在 config 文件夾下，會(huì)看到幾個(gè) xxx.env.js 的文件，dev 和 prod 默認(rèn)就有。

每一個(gè)文件，把它當(dāng)作不同的環(huán)境，如 dev 代表開發(fā)，prod 代表生產(chǎn)。

如果還有其他環(huán)境，比如培訓(xùn)環(huán)境，就把 prod.env.js 復(fù)制一份(復(fù)制 prod 不是 dev)，命名為 train.env.js (名字自定義)。

2.2 修改 xxx.env.js 中內(nèi)容，以生產(chǎn)環(huán)境為例，配置一個(gè) BASE_API (就是第1步所用到的)，值就是服務(wù)器地址。

注意這里的值是單引號嵌套雙引號，少一層嵌套是無效的

'use strict'
module.exports = {
    NODE_ENV: '"production"',
    BASE_API: '"https://www.***.com"'
}

2.3 還記得剛剛創(chuàng)建的 train.env.js (如果沒有新建的可跳過這一步)，對于這種手動(dòng)創(chuàng)建的，要改一下 NODE_ENV，不然就和生產(chǎn)重名了。

'use strict'
module.exports = {
    NODE_ENV: '"train"',    // production改為自定義名字
    BASE_API: '"https://www.***.com"'
}

3. 打包時(shí)根據(jù) process.env.NODE_ENV 判斷不同環(huán)境

build 文件夾下，webpack.prod.conf.js，找到為 const env = 這段(代碼第14行)，改成如下形式

const env = (function() {
    const NODE_ENV = process.env.NODE_ENV;
    if (NODE_ENV === 'testing') {
        return require('../config/test.env')
    } else if (NODE_ENV === 'train') {    // 這個(gè)就是剛剛自定義的環(huán)境
        return require('../config/train.env')
    } else {    // 默認(rèn)用生產(chǎn)環(huán)境
        return require('../config/prod.env')
    }
}())

4. 清除默認(rèn) process.env.NODE_ENV

build 文件夾下，build.js 中，默認(rèn) process.env.NODE_ENV 是 production，先注釋它

'use strict'
require('./check-versions')()
 
// process.env.NODE_ENV = 'production'    // 注釋掉這一段
 
const ora = require('ora')
const rm = require('rimraf')
const path = require('path')
const chalk = require('chalk')
const webpack = require('webpack')
const config = require('../config')
const webpackConfig = require('./webpack.prod.conf')

5. 設(shè)置不同的 process.env.NODE_ENV

由于上一步清除了默認(rèn)的 process.env.NODE_ENV，要在其他地方加回來

5.1 build文件夾下，新建 buildProd.js

代碼如下

'use strict'
process.env.NODE_ENV = 'production'
require('./build.js')

5.2 如果有其他環(huán)境，比如上面說的培訓(xùn)環(huán)境，新建 buildTrain.js (名字自定義)

代碼如下

'use strict'
process.env.NODE_ENV = 'train'    // 值要和 webpack.prod.conf.js 中判斷的地方對應(yīng)上
require('./build.js')

6. 配置 script 腳本

package.json 中，配置 script 腳本。

通常我們打包時(shí)，執(zhí)行 npm run build，經(jīng)過以上修改后，我們就要用不同的命令，來打包不同環(huán)境

/** 
  * 本代碼中的注釋只是為了說明，json中是不允許寫這些注釋的
  */
"scripts": {
    "dev": "webpack-dev-server --inline --progress --config build/webpack.dev.conf.js",
    "start": "npm run dev",
    "unit": "jest --config test/unit/jest.conf.js --coverage",
    "e2e": "node test/e2e/runner.js",
    "test": "npm run unit && npm run e2e",
    "lint": "eslint --ext .js,.vue src test/unit test/e2e/specs",
//  "build": "node build/build.js",        // 這是原來默認(rèn)的，寫在這里做參照
    "build": "node build/buildProd.js",    // 生產(chǎn)環(huán)境，改為 buildProd.js
    "train": "node build/buildTrain.js"    // 培訓(xùn)環(huán)境，改為 buildTrain.js
},

到這里，所有的修改都完成了，在發(fā)布不同環(huán)境時(shí)，這樣執(zhí)行：

生產(chǎn)環(huán)境：npm run build；培訓(xùn)環(huán)境：npm run train。其他環(huán)境舉一反三。

把不同環(huán)境的命令交給集成工程師，讓他們寫到 Jenkins 腳本中就可以了。

以上為個(gè)人經(jīng)驗(yàn)，希望能給大家一個(gè)參考，也希望大家多多支持腳本之家。 

最新評論