需求来源

项目需要部署多套环境来发布（测试、生产），对于项目而言目前只有代码中后台接口地址不同，要求项目在build的时候能根据需要build成不同后台接口的版本去发布，目前咱在项目里用到的是一种最简单的办法，针对不同的build需求，写不同的build脚本，以达到build出不同版本的目的。

在Vue项目里具体的实现

Vue项目用过package.json这个文件来定义一组npm脚本：

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

该scripts字段定义了7个脚本，可以通过npm run build的方式来运行node build/build.js这个部分，nodejs支持从环境变量中读取指定变量的值，关于这点在node命令行下也可以直接体现，通过process.env可以得到类似如下的结果：

╰$ node
> process.env
{ 
  COLORFGBG: '15;0',
  ITERM_PROFILE: 'natas',
  XPC_FLAGS: '0x0',
  LANG: 'zh_CN.UTF-8',
  SHELL: '/bin/zsh'
}

那么开头提到的需求的具体的实现就很简单了，在bash脚本里设置环境变量，在build脚本运行时读取环境变量的值作为build运行时的值，build出符合需求的版本。

具体的代码如下

文件列表

• build_for_test.sh
• conf/prod.env.js
• src/api/api.js

build_for_test.sh

#!/bin/bash
mkdir nginx_web
# set nodeJs ENV
export NODE_ENV_API_ROOT="http://x.x.x.x:8000/panelApi/v1"
export NODE_ENV_NAME="test"

echo "Build for test env"
echo "NODE_ENV_API_ROOT="${NODE_ENV_API_ROOT}
echo "NODE_ENV_NAME="${NODE_ENV_NAME}

# re build
npm run build && cp -R dist/* nginx_web/ && chmod -R 755 nginx_web

conf/prod.env.js

exports.exports = {
  NODE_ENV: '"' + process.env.NODE_ENV_NAME + '"',
  API_ROOT: '"' + process.env.NODE_ENV_API_ROOT + '"'
}

src/api/api.js

let baseUrl = process.env.API_ROOT
console.log('baseUrl', baseUrl)
export let axiosIns = axios.create({
  baseURL: baseUrl
})

这样一来，在运行build_for_test.sh时，环境变量NODE_ENV_API_ROOT被设置为期望的值，在build的过程中，require('conf/prod.env.js')时可以从process.env.NODE_ENV_API_ROOT中获取到环境变量的值，build完成后发布的版本中，src/api/api.js文件里的baseUrl值便可以从process.env.API_ROOT中获取到。