Vue項目根據不一樣運行環境打包項目

前提

1. 項目是直接經過 vue-cli腳手架 生成的；
2. 假設在項目開發中，分爲三個環境 --
   · 測試環境
   · 預生產環境
   · 生產環境

每一個環境的接口地址都是不一樣的，而 vue-cli 給出的環境只有 dev 和 prod 這兩個。雖然能夠選擇每次打包項目前手動修改 config/prod.env.js 中的 BASE_API 屬性值，再運行 npm run build 打包項目就OK了，但仍是挺煩的。若是能根據不一樣環境打包就一勞永逸了

步驟

第一步 安裝依賴 cross-env

使用 cross-env 解決跨平臺問題。在終端運行：

npm install cross-env --save-dev  // 安裝 cross-env 依賴

此依賴寫入 devDependencies 中，僅在開發環境中使用此依賴。

第二步 修改 package.json 文件

在 package.json 中 scripts 屬性中 build 命令替換爲：

// 生產環境
"build:prod": "cross-env NODE_ENV=production env_config=prod node build/build.js",
// 測試環境
"build:sit": "cross-env NODE_ENV=production env_config=sit node build/build.js", 
// 預生產環境
"build:prep": "cross-env NODE_ENV=production env_config=prep node build/build.js"

第三步 添加各環境參數

在 config 目錄下添加 sit.dev.js(測試環境) 和 prep.dev.js(預生產環境)。
那麼 config 目錄下有 三個js文件 分別對應 三個環境：

(1) sit.dev.js(測試環境)

module.exports = {
  NODE_ENV: '"production"',
  ENV_CONFIG: '"sit"',
  BASE_API: '"xxx"'    // 測試環境接口地址
}

(2) prep.dev.js(預生產環境)

module.exports = {
  NODE_ENV: '"production"',
  ENV_CONFIG: '"prep"',
  BASE_API: '"xxx"'    // 預生產環境接口地址
}

(3) prod.dev.js(生產環境)

module.exports = {
  NODE_ENV: '"production"',
  ENV_CONFIG: '"prod"',
  BASE_API: '"xxx"'     // 生產環境接口地址
}

第四步 修改 build/webpack.prod.conf.js 文件

const env = require('../config/prod.env')

使用構建環境參數，將 build/webpack.prod.conf.js 中的此行代碼修改成：

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

第五步 打包項目

// 測試環境打包項目
npm run build:sit

// 預生產環境打包項目
npm run build:prep

// 生產環境打包項目
npm run build:prod

-- END --
不足之處，歡迎指出；不喜請繞道，謝謝！