前端开发中有这么一个需求，服务器提供两个分支接口，一个 master 分支用来开发测试，一个release 分 支发布稳定版。
前端代码发布，执行 npm install 和 npm rebuild 命令，构建好静态文件包后，移到 HTTP Server 下的指定目录。这些操作由 GitLab-CI 脚本完成。
解决思路是这样的，自动部署文件可以通过不同分支执行不同命令，通过执行不同的 build 命令，配置代码中的全局环境变量，前端代码通过判断全局环境变量的方式，引入不同的配置文件。
开始。 在 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 中头部添加判断代码， 执行 npm run build 命令代表 release 分支，执行 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' }
默认都通过发布的方式进行打包构建，修改 config/index.js 中的环境变量配置部分
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 }), ...
示例项目参考链接： github.com/gywgithub/V…
