vue cli3建立測試打包環境（經過development、production、alpha指定不一樣的接口地址）

參考地址

前言：項目通常有開發環境，測試環境，生產環境；vue cli內置有開發和生產環境，能夠用process.env.NODE_ENV區分，有時候咱們和後臺同事須要本地鏈接調試代碼，又須要鏈接測試環境調試，發佈的還有生產環境。關靠NODE_ENV沒法區分3種baseUrl。下面加一種alpha環境變量，和production打包就productionSourceMap配置有區別，用於測試環境方便查看源碼調試。

一、建立vue cli環境變量

• 在項目根目錄建立文件 .env.build 編輯內容爲

NODE_ENV      = 'production'
VUE_APP_BUILD = 'production'

• 在項目根目錄建立文件 .env.alpha 編輯內容爲

NODE_ENV      = 'production'
VUE_APP_BUILD = 'alpha'

兩個文件NODE_ENV值都爲production，以消除vue cli內部使用NODE_ENV變量致使打包出現差別

二、修改package.json啓動模式

{
  "scripts": {
    "serve": "vue-cli-service serve",
    "build": "vue-cli-service build --mode build",
    "alpha": "vue-cli-service build --mode alpha"
  }
}

build用戶生產環境打包，alpha用於測試環境打包

三、修改vue.config.js配置

module.exports = {
  publicPath: process.env.NODE_ENV === 'production' ? './' : '/',
  lintOnSave: process.env.NODE_ENV !== 'production',
  productionSourceMap: process.env.VUE_APP_BUILD !== 'production' // 生產環境去掉map文件
}

四、不一樣環境使用不一樣url

const dev = '/test'
const alp = 'http://192.168.1.31:8443/api'
const pro = 'http://111.111.111.111:8443/api'

export const baseURL = process.env.NODE_ENV === 'development' ? dev : process.env.VUE_APP_BUILD === 'production' ? pro : alp

 經過process.env.VUE_APP_BUILD能夠取到配置在.env.[mode]文件裏面的值

 注：mode在build環境下爲.env.build文件下VUE_APP_BUILD配置的值