前言
由于前後端分離的前端應用脫離了後端的支援，在單獨開發前端應用時，頁面調試時使用固定的開發環境位址還好，如果出現在本地開發時需要調試不同環境的遠端API，或者需要将應用部署到不同環境的伺服器上時，如果不将這些環境對應的伺服器位址、環境專屬變量等單獨配置，也許每次切換環境都需要修改大量代碼。網上關于這部分的資料較少，是以下面将以用
vue-cli init
指令生成的
Vue/Webpack
項目作為例子，介紹一下我目前正在使用的簡單的多環境配置的思路。
1、理想中的多環境配置
在後端開發中，項目中不同環境對應的參數配置在不同的配置檔案中。當需要打包基于
Maven
的
Java
項目時，通常隻需要在打包指令的後面加上
-P
參數指定Profile環境，即可打包出對應環境的包，同理前端在使用
webpack
開發或者打包時如果也能這麼做，就會友善很多。
/* maven常用打包指令 */
mvn clean package -P prod
複制代碼 而在前端項目中，調試與打包指令
vue-cli init
已經為我們在
package.json
中生成好了。
/* /package.json */
"scripts": {
"dev": "webpack-dev-server --inline --progress --config build/webpack.dev.conf.js",
"start": "npm run dev",
"lint": "eslint --ext .js,.vue src",
"build": "node build/build.js"
}
複制代碼 如果可以将這些指令改造成後端中類似的打包指令，就很友善了，例如：
/* 改造後的指令，隻是打個比方，實際并不一定是這樣 */
"scripts": {
"start:dev": "npm run dev -P dev",
"build:test": "node build/build.js -P test"
}
/* 指令行 */
$ npm run start:dev //本地調試，開發環境
$ npm run build:test //打包，測試環境
複制代碼 是以首先需要解決的是如何把參數傳遞到調試/打包的腳本中。
注意：
這裡想特别說明一下的是，
vue-cli
腳手架幫我們生成好了整個項目，而且也有對應
webpack.dev.conf.js
和
webpack.prod.conf.js
兩個分離的
webpack
配置檔案，但由于檔案的命名問題（
dev.conf.js/prod.conf.js
），很容易讓人誤以為這兩個檔案就是webpack針對不同環境的配置。但實際上這兩個檔案一個是用于本地調試時的配置檔案，另一個是用于打包部署的配置檔案。調試/打包兩種模式 與 環境（
dev/test/pre/prod
等）是可以互相組合的。理論上來講這兩個
webpack
的配置檔案我覺得應該叫
webpack.debug.conf.js
webpack.build.conf.js
會更貼切一點。
2、腳本參數化
在
node.js
中傳遞參數到腳本中，有多種方法，例如使用
process.argv
：
/* hello.js */
console.log('hello ', process.argv[2]);
/* 指令行 */
$ node ./hello.js tidus
//process.argv = ['node', './hello.js', 'tidus']
hello tidus
複制代碼 雖然
process.argv
很友善，但可配置性不高，是以這裡用的是
yargs
，它是node.js中的一個元件，可以通過
npm
直接安裝。
===>戳我檢視yargs的api文檔$ npm install yargs --dev --save
/* hello.js */
const argv = require('yargs').argv;
console.log('hello ', argv.env);
/* 指令行 */
$ node ./hello.js --env test
hello test
複制代碼 通過
yargs
可以友善的擷取指定名稱的指令行參數，接下來就要看看如何利用這個參數實作多檔案配置。
3、引入環境變量
首先在
Webpack
的官網中已經有過簡單介紹如何配置環境變量的文檔，具體參考
Webpack Production。簡單的來說就是
DefinePlugin
插件會将我們源碼中所有出現的指定字元串替換為我們提供的對象/字元串，不同環境的配置檔案則放在
/config
目錄下。
/* /build/webpack.dev.conf.js: */
plugins: [
new webpack.DefinePlugin({
// 源碼中所有 process.env 都會被替換為
// '../config/dev.env'這個module export出來的東西
'process.env': require('../config/dev.env')
})
]
/* /config/dev.env.js */
'use strict'
const merge = require('webpack-merge')
const prodEnv = require('./prod.env')
module.exports = merge(prodEnv, {
NODE_ENV: '"development"'
})
複制代碼 顯然我們可以直接用這個插件為我們的多環境變量服務。
我們可以通過上面傳入到腳本中的環境參數，動态加載不同環境的配置檔案，以達到切換環境的目的。動态加載不同配置環境的代碼：
/* /build/webpack.env.conf.js */
// 定義參數配置
const argv = require('yargs').argv;
// 擷取環境變量
const env = argv.e;
process.stdout.write('the env is '+ env +'\n');
// require指定的環境配置檔案
const envConfigFile = "../config/" + env + ".env.js";
process.stdout.write('the env config file is '+ envConfigFile +'\n');
// 将require的配置檔案原封不動export回出去
module.exports = require(envConfigFile);
複制代碼 接下來要将動态加載的環境檔案丢到
webpack
的配置檔案中，由于
webpack.dev.conf.js
webpack.prod.conf.js
都是繼承自
webpack.base.conf.js
，是以我們直接改寫
wepack.base.conf.js
的插件配置部分，直接添加
DefinePlugin
插件的配置，并去掉原配置檔案該插件的配置：
/* /build/webpack.base.conf.js */
// 引入上面的webpack.env.conf子產品
const envConfig = require('./webpack.env.conf')
module.exports = {
...
,
// 配置DefinePlugin插件
plugins: [
// http://vuejs.github.io/vue-loader/en/workflow/production.html
new webpack.DefinePlugin({
'process.env': envConfig
})
],
...
}
複制代碼 然後調試/打包的指令還是用回預設生成的指令，隻不過在指令後面傳入環境參數：
/* /package.json */
"scripts": {
"start:dev": "webpack-dev-server --inline --progress --config build/webpack.dev.conf.js --e dev",
"start:test": "webpack-dev-server --inline --progress --config build/webpack.dev.conf.js --e test",
"start:pre": "webpack-dev-server --inline --progress --config build/webpack.dev.conf.js --e pre",
"start:prod": "webpack-dev-server --inline --progress --config build/webpack.dev.conf.js --e prod",
"build:dev": "node build/build.js --e dev",
"build:test": "node build/build.js --e test",
"build:pre": "node build/build.js --e pre",
"build:prod": "node build/build.js --e prod",
}
複制代碼 我們的環境配置檔案中的内容可以是這樣的：
/* /config/test.env.js */
'use strict'
const merge = require('webpack-merge')
const prodEnv = require('./prod.env')
module.exports = merge(prodEnv, {
NODE_ENV: '"test"',
API_HOST: '"http://test.xx.com:8080"'
})
複制代碼 然後我們就可以在源碼中使用
process.env.NODE_ENV
來擷取我們配置的環境變量的值，甚至可以單獨抽離一個api子產品：
/* /src/api/index.js */
const API_HOST = process.env.API_HOST;
export default {
api1: `${API_HOST}/path/to/api1`,
api2: `${API_HOST}/path/to/api2`
}
複制代碼 最後，在我們的Vue元件中就可以很友善的使用這些環境配置了：
/* /src/components/HelloWorld.vue */
import api from '@/api';
data () {
return {
msg: 'Welcome to Your Vue.js App',
env: process.env.NODE_ENV,
api1: api.api1,
api2: api.api2
}
}
複制代碼 4、總結
整個流程下來，我們添加了一個
webpack.env.conf.js
子產品，稍微小修改了一下
vue-cli
生成的3個
webpack
配置檔案，并在
config
目錄下添加了各個環境的配置檔案，項目的結構是這樣子的：
最終在頁面上看到的是這樣子的：
原文釋出時間為：2018年06月26日
原文作者：WilsonW
本文來源：
掘金 https://juejin.im/entry/5b2c4f426fb9a00e5f3e8d36如需轉載請聯系原作者