vue開發環境變量詳解（process.env）

為什么要配置環境變量

每個項目在開發和上線生產或者測試階段的服務器地址等有可能是不一樣的，所以需要根據環境給這些變量不一樣的值。

方式一：添加一個配置文件 config.ts

根據process.env.NODE_ENV區分不同環境
開發環境: development
生成環境: production
測試環境: test

let BASE_URL = ''
const TIME_OUT = 10000

if (process.env.NODE_ENV === 'development') {
  BASE_URL = 'http://123.207.32.32:8000/'
} else if (process.env.NODE_ENV === 'production') {
  BASE_URL = 'http://myweb.org/prod'
} else {
  BASE_URL = 'http://myweb.org/test'
}

export { BASE_URL, TIME_OUT }

在其它需要用到這些變量的文件中直接引入使用就可以了

import { BASE_URL, TIME_OUT } from './gloup/config'

方式二：在當前項目的根目錄創建三個文件.env.development、.env.production、.env.test

在相應的文件寫入不同環境的變量

具體的變量書寫規則可以參考 vue cli 中的環境變量要求
請注意，只有 NODE_ENV，BASE_URL 和以 VUE_APP_ 開頭的變量將通過 webpack.DefinePlugin 靜態地嵌入到客戶端側的代碼中。
在其它文件讀取環境變量的反式：

//比如我們聲明了一個環境變量為 VUE_APP_SECRET，讀取如下
process.env.VUE_APP_SECRET

環境變量基本都以大寫字母+下划線 的形式書寫（常量的書寫規范）