Vue 前端服务器API根据不同环境配置

前端开发中有这么一个需求，服务器提供两个分支接口，一个 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
    }),
...

示例项目参考链接： https://github.com/gywgithub/VueProjectConfiguration