快捷導(dǎo)航

Vue無法訪問.env.development定義的變量值問題及解決

更新時間：2023年01月10日 09:38:38 作者：longzhoufeng

這篇文章主要介紹了Vue無法訪問.env.development定義的變量值問題及解決，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教

Vue無法訪問.env.development定義的變量值

在.env.development定義變量時，發(fā)現(xiàn)獲取不取值。

比方：原來的定義的一個變量，是可以訪問的

VUE_APP_BASE_API = '/dev-api'

上面的是可以訪問的

后來發(fā)現(xiàn)有多個接口，需要調(diào)用不同地址訪問，就需要配置多個代理服務(wù)器的IP，我自己又定義了一個服務(wù)器地址：APP_DEV_USER_API = ‘/devApi’

輸出是：undefined

后來翻看官方文檔發(fā)現(xiàn)定義變量必須以：VUE_APP_XXXX 開頭

VUE_APP_PRO_API = '/proApi'

vue中.env | .env.development | .env.production使用

.env——全局默認(rèn)配置文件，無論什么環(huán)境都會加載合并
.env.development——開發(fā)環(huán)境下的配置文件
.env.production——生產(chǎn)環(huán)境下的配置文件

注意：屬性名必須以VUE_APP_開頭，比如VUE_APP_xxx = "變量"

首先在跟目錄創(chuàng)建三個文件

分別是.env.development、.env.production、.env.staging三個文件

# 頁面標(biāo)題
VUE_APP_TITLE = 若依管理系統(tǒng)
 
// .env.development文件里編寫，NODE_ENV default is development
 
# 開發(fā)環(huán)境配置
ENV = 'development'
 
# 若依管理系統(tǒng)/開發(fā)環(huán)境
VUE_APP_BASE_API = '/dev-api'
 
# 路由懶加載
VUE_CLI_BABEL_TRANSPILE_MODULES = true

# 頁面標(biāo)題
VUE_APP_TITLE = 若依管理系統(tǒng)
 
# 生產(chǎn)環(huán)境配置
ENV = 'production'
 
# 若依管理系統(tǒng)/生產(chǎn)環(huán)境
VUE_APP_BASE_API = '/prod-api'
 
// .env.production文件里編寫 NODE_ENV default is production

# 頁面標(biāo)題
VUE_APP_TITLE = 若依管理系統(tǒng)
 
NODE_ENV = production
 
# 測試環(huán)境配置
ENV = 'staging'
 
# 若依管理系統(tǒng)/測試環(huán)境
VUE_APP_BASE_API = '/stage-api'

vue-cli-service build 自定義參數(shù)

vue-cli-service build

（1）**作用：**是打包資源文件

（2）**工具：**通過腳手架依賴的dotenv模塊實現(xiàn)參數(shù)定義和讀取

（3）**原理：**detenv作用是將環(huán)境變量從.env文件加載到process.env中，代碼就可以通過process.env.VUE_APP_XX訪問自定義的VUE_APP_XX的值了

在vue-cli-service的packjson中切換環(huán)境

(1) 在運(yùn)行時如果需要區(qū)分生產(chǎn)環(huán)境和測試環(huán)境，只需要

“scriptes”: {
“serve”: “vue-cli-service serve”, // 會將process.env.NODE_ENV設(shè)置為development
“build”: “vue-cli-service build” // 會將process.env.NODE_ENV設(shè)置為production
}

(2)在build時在dist/目錄會有用于生產(chǎn)環(huán)境的包，需要添加選項–mode區(qū)分測試環(huán)境和生產(chǎn)環(huán)境

“scripts”: {
“build:test”: “vue-cli-service build --mode test”, // 測試環(huán)境
“build:prod”: “vue-cli-service build --mode prod”, // 生產(chǎn)環(huán)境
},

"build:dev": "vue-cli-service build --mode dev",?? ?// 打包開發(fā)環(huán)境
"build:test": "vue-cli-service build --mode test",?? ?// 打包集成測試
"build:uat": "vue-cli-service build --mode uat",?? ?// 打包驗收測試
"build:prod": "vue-cli-service build --mode prod",?? ?// 打包生產(chǎn)環(huán)境