場景描述：

項(xiàng)目中有好幾個(gè)地方調(diào)用了支付的功能，在開發(fā)環(huán)境和測試環(huán)境中，支付金額需要修改為1分錢，在生產(chǎn)環(huán)境中則是真實(shí)金額，支付接口是統(tǒng)一封裝的，只需要在調(diào)用之前判斷是開發(fā)環(huán)境還是生產(chǎn)環(huán)境就可以了。那么就需要用到環(huán)境變量，記錄一下解決的過程。

解決問題

請先簡單閱讀一下官方文檔，了解一下概念

1. 根目錄創(chuàng)建.env.development、.env.test、.env.production文件(開發(fā)、測試、生產(chǎn))
   

   image.png

2. 文件內(nèi)容及字段說明

• NODE_ENV:可以設(shè)置為其他值，比如"test",但是打包后的目錄結(jié)構(gòu)和"production"不一樣，所以還是設(shè)置為"production",通過"VUE_APP_MODE"變量來區(qū)分環(huán)境
• VUE_APP_MODE:線上測試環(huán)境
• VUE_APP_API_URL:api調(diào)用地址
• outputDir:打包生成的文件夾名稱，默認(rèn)是'dist'

2.1. .env.development內(nèi)容

NODE_ENV = 'development'
VUE_APP_MODE = 'development'
VUE_APP_API_URL = 'http://192.168.1.33:8008/api/'

2.2. .env.test內(nèi)容

NODE_ENV = 'production'
VUE_APP_MODE = 'test'
VUE_APP_API_URL = 'http://xxx.xxx.xxx.xx:8008/api/'
outputDir = test

2.3. .env.production內(nèi)容

NODE_ENV = 'production'
VUE_APP_MODE = 'production'
VUE_APP_API_URL = 'http://xxx.xxx.xxx.xx:8008/api/'

3. 修改vue.config.js中的打包輸入目錄
   

   image.png

4. 修改package.json文件
   

   image.png

"test": "vue-cli-service build --mode test",//打包測試環(huán)境
"publish": "vue-cli-service build && vue-cli-service build --mode test",//測試和生產(chǎn)一起打包

5. 修改我們自己的支付接口文件

   
   
   image.png

6. 打包
   運(yùn)行npm run test或者npm run publish
   

   image.png
   
   test是測試環(huán)境的，dist是生產(chǎn)環(huán)境的。

7.其他說明
再次說明一下為什么是用process.env.VUE_APP_MODE來判斷，而不是用process.env.NODE_ENV，如果我們在.env.test文件中把NODE_ENV設(shè)置為test的話，那么打包出來的目錄結(jié)構(gòu)是有差異的，差異如下圖

image.png