以前在打包專案，會寫三個環境地址，打包前都需要手動切換地址，實現多環境打包配置後可以省掉這一步。  

本文來談一談多環境打包的配置方法（本人是一枚前端小透明，用的方法不是最優，若有更優的，歡迎指教） 

1、在根目錄下 的config資料夾下新建test.env.js檔案

'use strict'
module.exports = {
  NODE_ENV: '"testing"',
  ENV_CONFIG: '"test"'
}

2、修改config資料夾下的prod.env.js檔案 

原始碼： 

'use strict'
module.exports = {
  NODE_ENV: '"production"'
}
 

修改後： 

'use strict'
module.exports = {
  NODE_ENV: '"production"',
  ENV_CONFIG: '"prod"'
}

注意：NODE_ENV與ENV_CONFIG的引數都是單引號包雙引號，否則會報錯 

3、修改build資料夾下的webpack.prod.conf.js

原始碼： 

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

修改後：  

const env = config.build[process.env.env_config + 'Env']

 4、修改config資料夾下的index.js檔案中的build部分的程式碼

原始碼： 

build: {
  // Template for index.html
  index: path.resolve(__dirname, '../dist/index.html'),

  // Paths
   ...  //  省略部分程式碼
}

修改後： 

build: {
  testEnv: require('./test.env'), // 新增
  prodEnv: require('./prod.env'), // 新增
  // Template for index.html
  index: path.resolve(__dirname, '../dist/index.html'),

  // Paths
  ...  // 省略部分程式碼
}
 

5、確認安裝cross-env （cross-env能跨平臺地設定及使用環境變數）

 windows不支援NODE_ENV=development的設定方式。在windows平臺下使用類似於: NODE_ENV=production的命令列指令會卡

住，windows平臺與POSIX在使用命令列時有許多區別（例如在POSIX，使用$ENV_VAR,在windows，使

用%ENV_VAR%。。。）。cross-env無需擔心跨平臺問題

npm安裝方式：npm i --save-dev cross-env

 6、修改build資料夾下的build.js

原始碼： 

'use strict'
require('./check-versions')()

process.env.NODE_ENV = 'production'

const ora = require('ora')
const rm = require('rimraf')
const path = require('path')
const chalk = require('chalk')
const webpack = require('webpack')
const config = require('../config')
const webpackConfig = require('./webpack.prod.conf')

const spinner = ora('building for production...')
spinner.start()
... // 省略部分程式碼 

修改後： 

'use strict'
require('./check-versions')()

// process.env.NODE_ENV = 'production' // 此處註釋掉

const ora = require('ora')
const rm = require('rimraf')
const path = require('path')
const chalk = require('chalk')
const webpack = require('webpack')
const config = require('../config')
const webpackConfig = require('./webpack.prod.conf')

// const spinner = ora('building for production...') // 此處修改成下面程式碼
const spinner = ora('building for' + process.env.NODE_ENV + 'of' + process.env.env_config + 'mode...')
spinner.start()

 7、修改根目錄下的package.json的scripts

原始碼： 

"scripts": {
  "dev": "webpack-dev-server --inline --progress --config build/webpack.dev.conf.js",
  "start": "npm run dev",
  "lint": "eslint --ext .js,.vue src",
  "build": "node build/build.js"
}

修改後： 

"scripts": {
  "dev": "webpack-dev-server --inline --progress --config build/webpack.dev.conf.js",
  "start": "npm run dev",
  "lint": "eslint --ext .js,.vue src",
  "build": "node build/build.js",
  "build--test": "cross-env NODE_ENV=testing env_config=test node build/build.js", // 新增
  "build--prod": "cross-env NODE_ENV=production env_config=prod node build/build.js" // 新增
}

8、在根目錄的src下面新增一個資料夾和js檔案用作配置介面引數 

 config.js設定介面引數，並將變數暴露出來

// 注：下面的baseURL地址為假地址，可以將它們打印出來檢視是否打包正確
let baseURL = ''
if (process.env.NODE_ENV === 'development') {
  baseURL = 'https://100.100.100.101/dev' // 開發
} else if (process.env.NODE_ENV === 'testing') {
  baseURL = 'https://100.100.100.102/test' // 測試
} else if (process.env.NODE_ENV === 'production') {
  baseURL = 'https://100.100.100.103/prod' // 線上環境
}

export {
  baseURL
}

9、 打包時可能會遇到的問題

（1）打包完畢後可能會有出現頁面空白 

頁面空白時，先F12檢視是否路徑錯誤，

若路徑錯誤，則需將 根目錄config下index.js中的build的assetsPublicPath：‘/’ 改為：assetsPublicPath：‘./’

但是此時會有另外一個問題，使用 npm run build--test 的時候 ，因為沒有配置testing時的路徑，因此會預設是'/'，此時可以在

根目錄build資料夾下的webpack.base.conf.js的output中增加一個判斷，將testing的路徑指定到prod 

原始碼： 

output: {
  path: config.build.assetsRoot,
  filename: '[name].js',
  publicPath: process.env.NODE_ENV === 'production'
    ? config.build.assetsPublicPath
    : config.dev.assetsPublicPath
}

 修改後：

output: {
  path: config.build.assetsRoot,
  filename: '[name].js',
  publicPath: process.env.NODE_ENV === 'production'
    ? config.build.assetsPublicPath
    : (process.env.NODE_ENV === 'testing' ? config.build.assetsPublicPath : config.dev.assetsPublicPath) //增加判斷
} 

 （2）為了防止萬一，可以將配置開發環境和prod環境的相關判斷中都加上testing環境的判斷：根目錄下build資料夾下的

vue-loader.conf.js和utils.js檔案 ，當然現在不改還沒有發現問題

如果想另外配置test環境，可以在根目錄build資料夾下新建webpack.test.conf.js和test.js，可以根據prod的修改，此時得修改

 各個地方關於環境的判斷

（3）此時，打包專案後，開啟index.html檔案，專案中的一些圖示可能會是404，這時修改build資料夾下的utils.js檔案，

原始碼：

修改後：

這時再打包，圖示的路徑就是正確的了。

整體而言配置多環境打包不復雜，主要是需要配置的檔案多，希望有更好方案的來分享