vue.config.js配置本地，測試，開發環境變量

永不禿頭的程序媛  2020-09-14 15:57:17  69  收藏 1

分類專欄： Vue 文章標簽： vue 前端

版權

 

vue.config.js配置本地，測試，開發環境變量

• • 背景
  • 環境配置
  • • 本地環境
    • 測試環境
    • 線上環境
    • package.json配置
    • 運行
    • • 開發環境
      • 測試環境
      • 線上環境
  • 注意
  • 附錄

 

背景

當我們使用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://10.8.228.226', 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": { "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

 

時，輸出的就是development，因為vue-cli-service serve命令默認設置的環境就是development。

測試環境

當我們運行

npm run build:test

時，webpack會讀取.env.test文件下的配置（如果沒有找到對應的配置文件，會默認使用開發環境的配置）

線上環境

當我們運行

npm run build

時，vue-cli-service build會使用默認環境 production。

此時我們就可以通過process.env.NODE_ENV和process.env.VUE_APP_NOTICE在項目中對不同環境進行不同操作。

注意

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

附錄

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