前端開發(fā)中有這么一個需求饿凛，服務器提供兩個分支接口，一個 master 分支用來開發(fā)測試软驰，一個release 分
支發(fā)布穩(wěn)定版涧窒。

前端代碼發(fā)布，執(zhí)行 npm install 和 npm rebuild 命令锭亏，構(gòu)建好靜態(tài)文件包后纠吴，移到 HTTP Server 下的指定目錄。這些操作由 GitLab-CI 腳本完成慧瘤。

解決思路是這樣的戴已，自動部署文件可以通過不同分支執(zhí)行不同命令，通過執(zhí)行不同的 build 命令锅减，配置代碼中的全局環(huán)境變量糖儡，前端代碼通過判斷全局環(huán)境變量的方式，引入不同的配置文件怔匣。

開始握联。 在 package.json 添加一個 master 分支的 build 命令, 添加 build-master 命令

...
"scripts": {
    "server": "node build/server.js",
    "dev": "node build/dev-server.js",
    "start": "npm run dev",
    "build-master": "node build/build.js -e master",
    "build": "node build/build.js",
    "unit": "cross-env BABEL_ENV=test karma start test/unit/karma.conf.js --single-run",
    "e2e": "node test/e2e/runner.js",
    "pytest": "cd ../backend && pytest",
    "test": "npm run unit && npm run pytest",
    "lint": "eslint --ext .js,.vue src test/unit/specs test/e2e/specs"
  },
...

在 build/build.js 中頭部添加判斷代碼， 執(zhí)行 npm run build 命令代表 release 分支金闽，執(zhí)行 npm run build-master 命令代表 master 分支代芜， 分別對變量 process.env.NODE_ENV 進行賦值

const argv = require('optimist').argv
let e = argv.e
if (e && e === 'master') {
  process.env.NODE_ENV = 'master'
} else {
  process.env.NODE_ENV = 'production'
}

默認都通過發(fā)布的方式進行打包構(gòu)建挤庇，修改 config/index.js 中的環(huán)境變量配置部分

const env = '"' + process.env.NODE_ENV + '"'
module.exports = {
  build: {
    env: env,
    ...
  },

這里的操作嫡秕，會配置好 webpack.prod.conf.js 文件中的 process.env 這個全局變量

const webpackConfig = merge(baseWebpackConfig, {
  module: {
  ...
  plugins: [
    new webpack.DefinePlugin({
      'process.env': env
    }),
...

全局變量配置好后遵班，在前端 main.js 代碼中判斷 process.env 狭郑，加載對應分支的配置汇在，引入對應服務器的接口

main.js

let config = null
if (process.env === 'development') {
  config = require('../config/dev.env')
} else if (process.env === 'master') {
  config = require('../config/master.env')
} else {
  config = require('../config/prod.env')
}

let serverIP = config.serverIP.replace(/"/g, '')

master.env.js 配置文件參考

'use strict'
module.exports = {
  NODE_ENV: '"master"',
  serverIP: '"www.xxx.com"'
}

注意這里的值都是單引號套雙引號

修改 webpack.dev.conf.js 中 process.env 變量的值

...
module.exports = merge(baseWebpackConfig, {
  module: {
    rules: utils.styleLoaders({ sourceMap: config.dev.cssSourceMap })
  },
  // cheap-module-eval-source-map is faster for development
  devtool: '#cheap-module-eval-source-map',
  plugins: [
    new webpack.DefinePlugin({
      'process.env': config.dev.env.NODE_ENV
    }),
...

示例項目參考鏈接： https://github.com/gywgithub/VueProjectConfiguration