vue項目經過命令行傳參實現多環境配置(基於@vue/cli)

大多數項目都有生產環境和開發環境,通常狀況下應該夠了,可是有時候還須要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.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的文件

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

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,頁面打印以下:

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

你運行npm run serve獲得的就是development

你運行npm run build獲得的就是production

你運行npm run test獲得的就是test (我沒試過)

我默認打包是打包生產環境,固然你也能夠輸入參數打包其餘環境

demo地址