使用webpack構建的工程，在開發過程中不同環境的配置不同，在各種環境的打包切換過程中需要手動修改相關配置達到預期目的。但是每次都手動修改會比較麻煩，所以參考了別人解決方案，自己進行總結，實現了不同環境打包分類配置。

參考：vuejs新增環境常量----多環境開發打包場景解決方案之一 - 個人文章 - SegmentFault 思否  https://segmentfault.com/a/1190000014899779?utm_source=channel-hottest

我的vue專案的目錄是這樣的

一個專案的開發除錯過程肯定不止開發環境和生產環境，由於缺少環境常量，開發人員常常需要手動修改BASE_URL，進而導致如果專案存在多個環境時，多出的環境沒辦法自動化構建。

axios.defaults.baseURL = 'http://xxx.xxx.xx.xx/' //更改環境api需要手動修改

1. env-config.js是我後新增進去的。

 env-config.js 如下

/*
 使用方法示例：
 打包：
 打包dev環境：npm run build --dev
 打包test環境：npm run build --test
 打包pro環境：npm run build --pro
 本地執行：
 本地執行dev環境：npm run dev --dev
 本地執行test環境：npm run dev --test
 無【--xxx】引數，則預設為dev環境：npm run dev
 */

'use strict'

const chalk = require('chalk')
const path = require('path')
/*
 * 環境列表，第一個環境為預設環境
 * envName: 指明現在使用的環境
 * dirName: 打包的路徑，只在build的時候有用
 * baseUrl: 這個環境下面的api 請求的域名
 * assetsPublicPath: 靜態資源存放的域名，未指定則使用相對路徑
 * */
const ENV_LIST = [
    {
        //開發環境
        envName: 'dev',
        dirName: 'dev',
        baseUrl: 'http://192.168.x.x:8767',
        assetsPublicPath:'/'
    },
    {
        //測試環境
        envName: 'test',
        dirName: path.resolve(__dirname, '../wechain'),
        baseUrl: 'http://47.104.xx.xx:8767',
        assetsPublicPath: '/'
    },
    {
        //生產環境（命令列引數（process.arg）中prod是保留字，所以使用pro）
        envName: 'pro',
        dirName: path.resolve(__dirname, '../wechain'),
        baseUrl: 'http://47.104.xxx.xxx:8767',
        assetsPublicPath:'/'
    },

]
console.log("process.env.assetsPublicPath="+process.env.assetsPublicPath)
//獲取命令列引數 http://nodejs.cn/api/process.html#process_process_argv
const argv = JSON.parse(process.env.npm_config_argv).original || process.argv
const HOST_ENV = argv[2] ? argv[2].replace(/[^a-z]+/ig,"") : ''
//沒有設定環境，則預設為第一個
const HOST_CONF = HOST_ENV  ? ENV_LIST.find(item => item.envName === HOST_ENV) : ENV_LIST[0]
// 把環境常量掛載到process.env.HOST_ENV方便客戶端使用
process.env.BASE_URL = HOST_CONF.baseUrl
// process.env.ENV_NAME = HOST_CONF.envName
// log選中的變數
console.log(chalk.green('當前環境：'))
console.log(HOST_ENV)
console.log(chalk.green('當前環境對應的常量：'))
console.log(HOST_CONF)

module.exports.HOST_CONF = HOST_CONF
module.exports.ENV_LIST = ENV_LIST
 

2.修改了webpack.base.config.js的程式碼，我需要引入公用的env-config.js 

3.修改了webpack.dev.config.js的程式碼

 //找到plugins，在這裡面新增如下程式碼
 plugins: [
    new webpack.DefinePlugin({
      'process.env.BASE_URL': '\"' + process.env.BASE_URL + '\"'
    })
  ],

4.修改了webpack.prod.config.js的程式碼

 //找到plugins，在這裡面新增如下程式碼
 plugins: [
    new webpack.DefinePlugin({
      'process.env.BASE_URL': '\"' + process.env.BASE_URL + '\"'
    })
  ],
 

5.如果需要配置更多變數，如測試和生產的私鑰可以在env-config.js進行新增

//找到 ENV_LIST 在這裡修改
const ENV_LIST = [
    {
        //開發環境
        envName: 'dev',
        dirName: 'dev',
        baseUrl: 'http://192.168.x.x:8767',
        assetsPublicPath:'/'，
        privateKey:'devprivateKey',//後新增的私鑰
    },
    {
        //測試環境
        envName: 'test',
        dirName: path.resolve(__dirname, '../wechain'),
        baseUrl: 'http://47.104.xx.xx:8767',
        assetsPublicPath: '/',
        privateKey:'testprivateKey',//後新增的私鑰
    },
    {
        //生產環境（命令列引數（process.arg）中prod是保留字，所以使用pro）
        envName: 'pro',
        dirName: path.resolve(__dirname, '../wechain'),
        baseUrl: 'http://47.104.xxx.xxx:8767',
        assetsPublicPath:'/',
        privateKey:'proprivateKey',//後新增的私鑰
    },

]




// 找到process.env.BASE_URL = HOST_CONF.baseUrl這段程式碼，在下面新增
process.env.BASE_URL = HOST_CONF.baseUrl;
process.env.privateKey= HOST_CONF.privateKey; //新增的私鑰

當然這還沒結束，我們需要在webpack.dev.config.js和webpack.prod.config.js裡面把如下程式碼修改

 new webpack.DefinePlugin({
          'process.env.BASE_URL': '\"' + process.env.BASE_URL + '\"',
           'process.env.privateKey': '\"' + process.env.privateKey+ '\"',//後加的私鑰
        }),

第五點私鑰只是舉了個例子，以後需要更多配置變數可以按照以上方式新增。

我把自己配置環境的情況進行總結，有什麼不足地方請多多指教。