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