vue-cli 2.x项目使用cross-env新建多个打包环境

脚手架自建的时候，只有一个线上环境，一个开发环境，有时候我们需要多个打包环境，比如一个线上正式版环境，一个内部测试环境，此时使用cross-env可以解决这个问题

第一步，安装cross-env

npm install cross-env --save

第二步，在package.json里面的"script": {},把build修改如下

"dev": "cross-env BABEL_ENV=development webpack-dev-server --inline --progress --config build/webpack.dev.conf.js",
"build:sit": "cross-env NODE_ENV=production env_config=sit node build/build.js",
"build:prod": "cross-env NODE_ENV=production env_config=prod node build/build.js"

上面代码有一个开发环境，一个sit测试环境，一个prod环境
完整代码如下

  "scripts": {
    "dev": "cross-env BABEL_ENV=development webpack-dev-server --inline --progress --config build/webpack.dev.conf.js",
    "start": "npm run dev",
    "unit": "jest --config test/unit/jest.conf.js --coverage",
    "e2e": "node test/e2e/runner.js",
    "test": "npm run unit && npm run e2e",
    "build:sit": "cross-env NODE_ENV=production env_config=sit node build/build.js",
    "build:prod": "cross-env NODE_ENV=production env_config=prod node build/build.js"
  },

第三步，在config/prod.env.js里面，把代码修改如下

module.exports = {
  NODE_ENV: '"production"',
  ENV_CONFIG: '"prod"',
  BASE_API: '"这里填写你的接口的基础url"',//线上环境
}

第四步，在config文件夹里面新建一个js文件，命名为 sit.env.js（config/sit.env.js）,里面配置代码如下

module.exports = {
  NODE_ENV: '"production"',
  ENV_CONFIG: '"sit"',
  BASE_API: '"这里是测试环境的基础url"',//测试环境
}

第五步，在build/webpack.prod.conf.js里面，把下面代码

const env = process.env.NODE_ENV === 'testing'
  ? require('../config/test.env')
  : require('../config/prod.env')

修改替换成

const env = require("../config/" + process.env.env_config + ".env")

第六步，在build/build.js里面，修改部分代码，具体如下

把代码const spinner = ora('building for production...')替换成 const spinner = ora("building for " + process.env.env_config)

到这里，我们就新建了一个测试环境，一个线上环境。打包命令就分别如下

测试环境：npm run build:sit，线上环境：npm run build:prod