vue腳手架 環境變量和模式

vue-cli環境變量配置文檔：https://cli.vuejs.org/zh/guide/mode-and-env.html#%E6%A8%A1%E5%BC%8F

你可以替換你的項目根目錄中的下列文件來指定環境變量：

.env                # 在所有的環境中被載入
.env.local          # 在所有的環境中被載入，但會被 git 忽略
.env.[mode]         # 只在指定的模式中被載入
.env.[mode].local   # 只在指定的模式中被載入，但會被 git 忽略

一個環境文件只包含環境變量的“鍵=值”對：

FOO=bar
VUE_APP_SECRET=secret

 

 

 

 

 

 

模式是 Vue CLI 項目中一個重要的概念。默認情況下，一個 Vue CLI 項目有三個模式：

• development 模式用於 vue-cli-service serve
• production 模式用於 vue-cli-service build 和 vue-cli-service test:e2e
• test 模式用於 vue-cli-service test:unit

注意模式不同於 NODE_ENV，一個模式可以包含多個環境變量。也就是說，每個模式都會將 NODE_ENV 的值設置為模式的名稱——比如在 development 模式下 NODE_ENV 的值會被設置為 "development"。

你可以通過為 .env 文件增加后綴來設置某個模式下特有的環境變量。比如，如果你在項目根目錄創建一個名為 .env.development 的文件，那么在這個文件里聲明過的變量就只會在 development 模式下被載入。

你可以通過傳遞 --mode 選項參數為命令行覆寫默認的模式。例如，如果你想要在構建命令中使用開發環境變量，請在你的 package.json 腳本中加入：

 

 

 

示例：Staging 模式

假設我們有一個應用包含以下 .env 文件：

VUE_APP_TITLE=My App

和 .env.staging 文件：

NODE_ENV=production
VUE_APP_TITLE=My App (staging)

 

 

 

在客戶端側代碼中使用環境變量

只有以 VUE_APP_ 開頭的變量會被 webpack.DefinePlugin 靜態嵌入到客戶端側的包中。你可以在應用的代碼中這樣訪問它們：

console.log(process.env.VUE_APP_SECRET)

 

 

 

 實例：

.env.development

# just a flag
ENV = 'development'

# base api
VUE_APP_BASE_API = '/dev-api'

VUE_CLI_BABEL_TRANSPILE_MODULES = true

.env.production

# just a flag
ENV = 'production'

# base api
VUE_APP_BASE_API = ''

然后在項目中使用時，可以這樣來調用上面的兩個環境變量：

process.env.NODE_ENV === 'development'  //開發環境
process.env.VUE_APP_BASE_API   //base api

 

 ======================================================================================================

vue-cli2配置環境變量：

安裝  cross-env

npm install cross-env --save-dev

 

 

 

 假如在開發環境加環境變量：我們在package.json文件中復制一下dev腳本命令，寫成devtest

然后，這樣寫：

 

 

 

TESTING=true  

TESTING就是一個環境變量，值為true，可以理解成這樣  TESTING:true

那么光這樣做，在項目中是不能訪問到環境變量的，

需要在config中的dev.evn.js中加上這樣的變量

 

 

 當然也可以寫成其他的值，命令行中的環境變量會被對應config文件中的環境變量覆蓋，如果想在項目中訪問到環境變量，腳本命令上和，config文件中的配置缺一不可，否則訪問到的就是undefined

以上是開發環境中配置環境變量的方法，

那么在生成環境怎么配置呢？

vue-cli最初只會區分兩種環境，開發環境和生產環境，

但是平時工作中可能會有，測試環境和預發布環境，這些都屬於生產環境，

正式環境，測試環境，預發布環境 理解成模式比較好，那么該如何配置呢？比如說，在測試環境上，靜態資源是訪問項目本身的資源，到正式環境上要訪問cdn上的靜態資源。這樣用環境變量來配置，就可以很方便。

同樣的，從修改package.json文件開始，比如說我們區分兩個生產環境，一個測試環境和一個正式環境

這里先說明一下，dev的默認NODE_ENV  是 development   build的默認NODE_ENV是production

下面來配置一下測試環境和正式環境的 啟動命令：

 

 

NODE_ENV=xxx  將設置webpack的打包時的 NODE_ENV 環境變量  淡然可以自定義其他的環境變量； 發現NODE_ENV環境變量必須出現在打包命令上

修改項目config配置文件

test.env.js

 

 

prod.env.js

 

 

 之后修改config文件下的index.js文件

修改build下的參數：

 

 我在最上面嘗試訪問 NODE_MODE 環境變量 可以成功訪問，這里說明一下，我們有一個環境變量NODE_ENV比較特殊，我發現，我無論設置成什么值，他都是production，所以我目前認為，

只要是打包環境，這個NODE_ENV的值就是production 所以這個環境變量就乖乖的寫成production就行了，其它的環境變量可以自定義

另外畫紅色矩形的代碼，是我比葫蘆畫瓢加上去的，這樣設置沒有報錯；

如果有更多的環境，可以這樣寫：這樣寫 目的是引入，起什么屬性名不重要

 

 

我們只寫了兩種，想拓展的自由拓展

最后一個畫紅色底線的是我通過判斷 NODE_MODE環境變量來區分正式環境還是測試環境，設置不同的靜態資源訪問路徑，經過打包測試，成功了；

說一下打包命令包

//測試環境
npm run build:test
//正式環境
npm run build:prod

 

 在測試環境打包上線時，報錯

Uncaught TypeError: Cannot read property 'NODE_ENV' of undefined

 

 在網上查一下，需要修改    webpack.prod.conf.js中需要配置DefinePlugin如下---完美解決

 

 

 然后報錯傑消失了

 

 

 

 

。