vue.config.js配置本地測試開發環境變量及獲取env中設置的變量

 

背景

當我們使用vue-cli3.0搭建項目時，相比於之前的vue-cli2.0少了build於config文件夾，所以vue-cli3.0提供了一個可選的配置文件----vue.config.js來對項目進行webpack的配置。最典型的一個配置就是接口配置，如：

// vue.config.js
module.exports = {
  // 是否生成map文件
  productionSourceMap: process.env.NODE_ENV === 'production' ? false : true, 
  // 接口api配置
  devServer: {
    proxy: {
      '/soc': {
        target: 'http://127.0.0.1',
        changeOrigin: true,
        onProxyReq (proxyReq, req, res) {
          proxyReq.setHeader('Cookie', 'ticket=ST-2237-ntnV2Q8073vcd4pHq3zfPoiJjlMbf5e3914-927d-410c-abb1-1f758090c523;SESSION=23690155-8703-4f1c-b964-faa9e206bf21;')
        }
      }
    }
  },
  // less樣式配置
  css: {
    loaderOptions: {
      css: {},
      less: {
        javascriptEnabled: true
      }
    }
  }
}

 

而在實際項目的開發中，我們一般會經歷幾個階段或者說是幾個環境，比如：開發環境，測試環境，線上環境。每個環境下項目代碼的要求也不完全一樣，例如測試環境和線上環境當用戶尚未登錄的時候會自動跳轉到登錄頁，但是測試環境和線上環境的登錄頁是不一樣的，那么我們如何能夠在這三個或者更多的環境下切換來實現項目展現不同的效果呢？特別是vue-cli3.0已經沒有了build和config這樣的文件夾。

 

環境配置

本地環境

vue.config.js平級目錄下新建.env.development

// .env.development
NODE_ENV = 'development' // 這里可以不寫，默認就是development
VUE_APP_NOTICE = 'dev'

測試環境

vue.config.js平級目錄下新建.env.test

// .env.test
NODE_ENV = 'test'
VUE_APP_NOTICE = 'test'

線上環境

vue.config.js平級目錄下新建.env.production

// .env.production
NODE_ENV = 'production'
VUE_APP_NOTICE = 'pro'

package.json配置

// package.json
"scripts": {
  "dev": "vue-cli-service serve",
  "serve": "vue-cli-service serve",
  "build": "vue-cli-service build",
  "build:test": "vue-cli-service build --mode test"
},

運行

此時我們就配置好了開發環境，測試環境和線上環境。我們可以在項目中通過process.env.[name]來訪問我們定義的變量，如

// main.js
console.log(process.env.NODE_ENV)
console.log(process.env.VUE_APP_NOTICE)

 

啟動命令

npm run serve  //本地環境
npm run dev //本地環境
npm run build:test //測試環境
npm run build //線上環境

 

注意

當我們配置環境變量時候，除了process.env已有的baseUrl和NODE_ENV可以更改值，對於我們想要自定義添加的環境變量必須使用VUE_APP開頭。

下面有圖為證（項目中使用配置文件的變量），配置名中有PUBLIC的全局變量被處理了.

 

 

 

 

附錄

權威說明可以參考Vue CLI給出的文檔

 

轉：  https://www.cnblogs.com/xm0328/p/13791561.html