vue-cli如何添加多種環境變量

目前webpack(vue-cli) 打包有兩種變量，development, productor, 如何添加一個 test的測試環境呢

vue-cli 3.0

vue-cli3.0簡化了業務需求，沒有那么多額外的配置，目前想改變環境變量，官方默認如此, 網友1

官方默認兩種類型 develpoment production,而我們實際開發過程中，會有本地開發，測試環境，正式環境等等，因而這兩種環境變量是不夠的，因而需要第三種乃至多種變量環境

基於vue-cli3.0進行配置

You can specify env variables by placing the following files in your project root:

.env                # loaded in all cases
.env.local          # loaded in all cases, ignored by git
.env.[mode]         # only loaded in specified mode
.env.[mode].local   # only loaded in specified mode, ignored by git

An env file simply contains key=value pairs of environment variables:

FOO=bar
VUE_APP_SECRET=secre

上面所述，在根目錄配置 .env,.env.[mode]...的文件，其次需要以VUE_APP開頭進行變量申明

搭建項目進行測試

...
.env.development
.env.production
.env.test
package.json
...

每個文件的具體內容

.env.development

/* VUE_APP_CURRENTMODE 當前環境變量 */
VUE_APP_CURRENTMODE = 'development'
VUE_APP_ENV = 'development環境'
VUE_APP_LOGOUT_URL = 'http://l72.16.0.95/logout_development'

.env.production

VUE_APP_CURRENTMODE = 'production'
VUE_APP_ENV = 'production環境'
VUE_APP_LOGOUT_URL = 'http://l72.16.0.95/logout_production'

.env.test

/* NODE_ENV 目的用於指定是一開發還是生產形式進行操作 */
NODE_ENV = 'development'
VUE_APP_CURRENTMODE = 'test'
VUE_APP_ENV = 'test環境'
VUE_APP_LOGOUT_URL = 'http://baidu.cn/logout_test'

package.json

...
 "scripts": {
    "serve": "vue-cli-service serve",
    "build": "vue-cli-service build",
    "lint": "vue-cli-service lint",
    /* --mode test 用來傳遞參數 */
    "test-serve": "vue-cli-service serve --mode test"
  },
 ...

NODE_ENV, VUE_APP_* ...需要多注意一下

通過上面配置，VUE_APP_LOGOUT_URL 在不同環境變量生成不同的對應退出鏈接，
一下便是具體展示效果

yarn serve // 開發環境

yarn test-serve // 測試環境

yarn build // 生產環境

通過這樣配置，只用通過命令行便可以生成不同環境下的項目，如此便可以不用每次都要去改動具體的變量了

vue-cli2配置

現在vue-cli2的文檔被vue-cli3替代了，只能用這種最low但卻最簡單的辦法來解決問題

...
webpack.base.conf.js
webpack.dev.conf.js
webpack.dev.conf.test.js
webpack.prod.conf.js
...

build文件夾下 新增一個需要的環境 webpack.dev.conf.test.js直接復制 webpack.dev.conf.js即可，
config文件夾下，添加一個dev.env.test.js

webpack.dev.conf.test.js

...
plugins: [
  new webpack.DefinePlugin({
  // 環境變量  改為自己設定的變量即可
  'process.env': require('../config/dev.env.test') 
})
...

dev.env.test.js 依舊復制對應 dev.env.js

'use strict'
const merge = require('webpack-merge')
const prodEnv = require('./prod.env')

module.exports = merge(prodEnv, {
  NODE_ENV: '"testing"',
  VUE_APP_CURRENTMODE: '"testing"',
  VUE_APP_ENV: '"testing環境"',
  VUE_APP_LOGOUT_URL: '"http://l72.16.0.95/logout_testing"'
})

此處注意申明的變量 都需要 '"var"'這樣定義，不然拿不到值

最后在package.json
中添加 "test-dev": "webpack-dev-server --inline --progress --config build/webpack.dev.conf.test.js",即可

最后各種效果圖

1. npm run dev
   

2. npm run test-dev
   

3. npm run build
   

總結

• 開發環境依舊是兩種 development production,只是在這兩種基礎上進行具體指定不同變量罷了，因而所謂的測試環境只是在生產環境中，另外列出一種變量，這樣用於區分生產與測試的不同而已
• 目前vue-cli2和vue-cli3就都可以使用了，細節肯定都需要更多優化
• 對應的代碼碼雲

2019-02-14 vuecli2 補充

package.json

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

• 方式一

查了一些資料，對package.json有了更多的一些了解，才發現其實通過環境變量會有更加簡潔的方案。npm_lifecycle_event

修改之前的方案

prod.env.js

const env = process.env.npm_lifecycle_event === 'build' ? require('../config/prod.env') : require('../config/prod.env.test')

• 方式二

通過傳參模式進行判斷 process.argv --表示傳參，我添加=是為了表示傳參方便，便於識別

"test": "node build/build.js --test=123 --build=12346"

獲取參數

const PARAMS = process.argv.splice(2)
function getKeyValue (params = []) {
  if (!Array.isArray(params)) throw new Error('請傳入數組格式參數')
  const obj = {}
  params.forEach(item => {
    const o = item.slice(2).split('=')
    obj[o[0]] = o[1]
  })
  return obj
}
const r = getKeyValue(PARAMS) // { test: '123', build: '12346' }

如此便可以在require時進行判斷，具體選擇哪一個即可

總結，這樣就又多了幾種方式，如此便更好使用