vuejs添加環境常量----多環境開發打包場景解決方案之一

2018/8/24更新：
目前VUE CLI 3.0 已經提供環境變量配置了，建議直接使用。

前言

vue-cli構建的項目沒有angular-cli標配的environments環境依賴，只區分開發模式、單元測試模式和生產模式。

//config
dev.env.js
test.env.js
prod.env.js

一個項目的開發調試過程確定不止開發環境和生產環境，因爲缺乏環境常量，開發人員經常須要手動修改BASE_URL，進而致使若是項目存在多個環境時，多出的環境沒辦法自動化構建。

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

解決思路

利用process對象，獲取啓動Node.js進程時的命令行參數（process.argv）,匹配當前開發或生產的環境常量掛載到process.env。

具體實現

/config
添加env-config.js文件

'use strict'

const chalk = require('chalk')
/*
* 環境列表，第一個環境爲默認環境
* envName: 指明如今使用的環境
* dirName: 打包的路徑，只在build的時候有用
* baseUrl: 這個環境下面的api 請求的域名
* assetsPublicPath: 靜態資源存放的域名，未指定則使用相對路徑
* */
const ENV_LIST = [
    {
        envName: 'dev',
        dirName: 'dev',
        baseUrl: 'http://192.168.xx.xx:8000/',
        assetsPublicPath:'./'
    },
    {
        envName: 'test',
        dirName: 'test',
        baseUrl: 'http://192.168.xx.xx:8000/',
        assetsPublicPath: './'
    },
    {
        envName: 'pro',
        dirName: 'pro',
        baseUrl: 'http://webapi.xxx.com/',
        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
// log選中的變量
console.log(chalk.green('當前環境常量：'))
console.log(HOST_CONF)

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

//build/webpack.base.conf.js 經過webpack傳入客戶端中

plugins: [
    new webpack.DefinePlugin({
      'process.env.BASE_URL': '\"' + process.env.BASE_URL + '\"'
    })
  ],

具體使用

指定開發時的環境，默認爲dev環境，envName爲config/env-config.js配置的環境常量，對應的process.env.BASE_URL的值就是 對應的ENV_LIST中的baseUrl

npm run dev --[envName]

指定環境打包,輸出至dist/[envName]

npm run build --[envName]

//打包測試環境

//本地調試生產環境

打包全部環境

/package.json 「script"

"build-all": "npm run build --dev && npm run build --test && npm run build --pro"

目前發現的問題

命令行參數（process.argv）有保留關鍵字或者是被佔用的，如prod,須要注意規避。