process.env前端環(huán)境變量配置教程

1、為什么要配置環(huán)境變量

在公司，一個項目一般會有開發(fā)版本、測試版本、灰度版本和線上版本，每個版本會對應(yīng)相同或不同的數(shù)據(jù)庫、API地址。為了方便管理，我們通常做成配置文件的形式，根據(jù)不同的環(huán)境，加載不同的文件。如果手動修改代碼中加載配置文件的路徑也可以，但是太麻煩，最重要的是很low（無形裝逼，最為致命）。

2、實(shí)現(xiàn)原理

采用nodejs頂層對象中的process.env（進(jìn)程環(huán)境，返回一個包含用戶環(huán)境信息的對象。）屬性，根據(jù)各個環(huán)境的配置文件區(qū)分和切換環(huán)境

3、具體操作（以vue項目為例）

1）、安裝依賴

npm install process

2）、在根目錄新增五個文件(根據(jù)自身情況增減)

.env 和 .env.dev 和 .env.pre和 .env.prod和 .env.sit和 .env.uat，分別為默認(rèn)配置、本地開發(fā)配置、灰度配置、生產(chǎn)配置、測試配置1、測試配置2，(ps:?vue_APP是統(tǒng)一標(biāo)志，后面的拓展名可以任取)

.env

VUE_APP_TITLE='dev'

.dev

NODE_ENV = 'development'VUE_APP_TITLE = 'development'/*請求接口地址*/VUE_APP_INTERFACE_URL="https://xxx"/*首頁地址*/VUE_APP_URL="http://xxx"/*proxy代理地址*/VUE_APP_PROXYURL='http://xxx'

.prod

NODE_ENV = productionVUE_APP_TITLE = 'prod'/*請求接口地址*/VUE_APP_INTERFACE_URL="https://xxx"/*首頁地址*/VUE_APP_URL="http://xxx"

3、設(shè)置項目啟動時默認(rèn)的環(huán)境

只需要在項目啟動命令后面修改需要的環(huán)境就行，例如我這是npm?run dev，把--mode dev改成--mode uat就行了
package.json

"scripts": {    "dev": "vue-cli-service serve --mode dev",    "build": "vue-cli-service build --mode dev",    "lint": "vue-cli-service lint",    "build-sit": "vue-cli-service build --mode sit",    "build-uat": "vue-cli-service build --mode uat",    "build-pre": "vue-cli-service build --mode pre",    "build-prod": "vue-cli-service build --mode prod"  },

4、查看環(huán)境是否配置成功

在main.js里打印當(dāng)前環(huán)境，輸出就成功了

console.log(process.env.NODE_NEV)

本文完~