震驚！超詳細的process.env前端環境變量配置教程

前端環境變量配置

 

1、爲何要配置環境變量

在公司，一個項目通常會有開發版本、測試版本、灰度版本和線上版本，每一個版本會對應相同或不一樣的數據庫、API地址。爲了方便管理，咱們一般作成配置文件的形式，根據不一樣的環境，加載不一樣的文件。若是手動修改代碼中加載配置文件的路徑也能夠，可是太麻煩，最重要的是很low（無形裝逼，最爲致命）。

2、實現原理

採用nodejs頂層對象中的process.env（進程環境，返回一個包含用戶環境信息的對象。）屬性，根據各個環境的配置文件區分和切換環境

3、具體操做（以vue項目爲例）

一、安裝依賴

npm install process

 

二、在根目錄新增五個文件(根據自身狀況增減)， .env 和 .env.dev 和 .env.pre和 .env.prod和 .env.sit和 .env.uat，分別爲默認配置、本地開發配置、灰度配置、生產配置、測試配置一、測試配置2，(ps: VUE_APP是統一標誌，後面的拓展名能夠任取)

　　.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 = production
VUE_APP_TITLE = 'prod'
/*請求接口地址*/
VUE_APP_INTERFACE_URL="https://xxx"
/*首頁地址*/
VUE_APP_URL="http://xxx"

 

三、設置項目啓動時默認的環境

只須要在項目啓動命令後面修改須要的環境就行，例如我這是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"
  },

 

四、查看環境是否配置成功

在main.js裏打印當前環境，輸出就成功了

console.log(process.env.NODE_NEV)

若是讀後有收穫能夠給做者加個煎蛋：