vue專案通過命令列傳參實現多環境配置(基於@vue/cli)

obliviousSing發表於2019-03-04
Vue命令列

大多數專案都有生產環境和開發環境,一般情況下應該夠了,但是有時候還需要sit,uat,本地等環境,這時候假如要通過註釋的方式切換環境就相當麻煩了. 如果可以像下面這樣切換環境就方便了

npm run serve //預設本地開發環境

npm run serve -sit //本地開發中使用sit環境

npm run serve -uat //本地開發中使用uat環境

npm run build //預設打包後使用生產環境

npm run build -local //打包後使用本地環境

npm run build -sit //打包後使用sit環境

npm run build -uat //打包後使用uat環境

如果對@vue/cli還不熟的話，建議看看這篇文章

我們首先在根目錄下面建立一個vue.config.js檔案,如圖

vue專案通過命令列傳參實現多環境配置(基於@vue/cli)

vue.config.js程式碼如下:

const webpack = require(`webpack`)
const environment = require(`./build/environment`)

module.exports = {
  baseUrl: `/wxperp/`,
  configureWebpack: {
    plugins: [
      new webpack.DefinePlugin({
        `process.env.STAGE`: JSON.stringify(environment.stage),
        `process.env.LOCAL_URL`: JSON.stringify(environment.localUrl)
      })
    ]
  }
}
複製程式碼

new webpack.DefinePlugin的作用是允許你建立一個在編譯時可以配置的全域性常量

然後在根目錄建立一個build資料夾,裡面建立一個environment.js的檔案

vue專案通過命令列傳參實現多環境配置(基於@vue/cli)

environment.js程式碼如下:

const os = require(`os`)

// 獲取命令列變數
const configArgv = JSON.parse(process.env.npm_config_argv)
const original = configArgv.original.slice(1)
const stage = original[1] ? original[1].replace(/-/g, ``) : ``
// 本地ip地址
let localUrl
try {
  const network = os.networkInterfaces()
  localUrl = network[Object.keys(network)[0]][1].address
} catch (e) {
  localUrl = `localhost`
}
localUrl = `http://` + localUrl + `/`

module.exports = {
  stage, localUrl
}
複製程式碼

這個stage就是你輸入的變數,比如你輸入npm run serve -sit那麼stage的值就為sit

這個localUrl就是你本地的ip,不過很多人應該用不到,我們公司比較特殊,開發的時候,介面請求的地址都是請求的自己本地伺服器,
如果不自動獲取本地ip,那麼每個同事都得在配置檔案中保留一份自己得ip地址,很麻煩，所以就自動獲取了.

接下來再src目錄下面建立一個config.js,記得在main.js中引用這個config.js

vue專案通過命令列傳參實現多環境配置(基於@vue/cli)

config.js程式碼如下:

(() => {
  const urlMap = {
    local: process.env.LOCAL_URL + `api`,
    sit: `http://xxx.xxx.xxx:xxxx/sit/api`,
    uat: `http://xxx.xxx.xxx:xxxx/uat/api`,
    prod: `http://xxx.xxx.xxx:xxxx/prod/api`
  }
  //sit,uat,prod
  let stage = process.env.STAGE
  //development,production
  const nodeEnv = process.env.NODE_ENV
  //nodeEnv為production並且stage不存在預設為生產環境
  if (nodeEnv === `production` && !stage) {
    stage = `prod`
  } else {
    //stage不存在預設為本地開發環境
    stage = stage || `local`
  }

  console.log(`ip:` + urlMap[stage])
})()
複製程式碼

我們輸入npm run serve -sit,頁面列印如下:

vue專案通過命令列傳參實現多環境配置(基於@vue/cli)

再囉嗦下,process.env.NODE_ENV是@vue/cli提供的,貌似有三個值(development,production,test),

你執行npm run serve得到的就是development

你執行npm run build得到的就是production

你執行npm run test得到的就是test (我沒試過)

我預設打包是打包生產環境,當然你也可以輸入引數打包其他環境

demo地址

相關文章