在項(xiàng)目中總會(huì)遇到一些默認(rèn)的配置,需要我們配置到靜態(tài)文件中方便我們?nèi)カ@取,這時(shí)候就可以用到這個(gè).env環(huán)境變量文件,在cli創(chuàng)建的項(xiàng)目中頂層的nodejs會(huì)有一個(gè)process對(duì)象,這個(gè)對(duì)象可以根據(jù)不同的環(huán)境獲取不同的環(huán)境配置文件,但是vite中獲取變量的方式不一樣。
創(chuàng)建變量文件.env.[mode]??
![在vite或者vue-cli中使用.env[mode]環(huán)境變量](https://imgs.yssmx.com/Uploads/2023/05/459254-1.png)
1.在vue-cli 中
? ?1.1創(chuàng)建
? ? 注意：屬性名必須以 VUE_APP_ 開頭，如：VUE_APP_XXX
ENV='development'
# base api
VUE_APP_BASE_URL='www.baidu.com'
VUE_APP_BASE_NAME='VUE項(xiàng)目'
? ?1.2使用
可以在js文件中是用process.env來獲取環(huán)境配置
let baseURL = process.env.VUE_APP_BASE_API;
2.在vite中
Vite內(nèi)置了dotenv這個(gè)第三方庫，?dotenv會(huì)自動(dòng)讀取.env文件，?dotenv?從你的?環(huán)境目錄?中的下列文件加載額外的環(huán)境變量：
.env?? ? ? ? ? ? ? ? ? ? # 所有情況下都會(huì)加載
.env.[mode] ? ??? ? # 只在指定模式下加載?
默認(rèn)情況下
- npm run dev 會(huì)加載 .env 和 .env.development 內(nèi)的配置
- npm run build 會(huì)加載 .env 和 .env.production 內(nèi)的配置
- mode 可以通過命令行 --mode 選項(xiàng)來重寫。
? ?1.1創(chuàng)建
為了防止意外地將一些環(huán)境變量泄漏到客戶端，只有以 VITE_ 為前綴的變量才會(huì)暴露給經(jīng)過 vite 處理的代碼
ENV='development'
# base api
VITE_APP_BASE_URL='http://10.243.11.35:7200/'
VITE_APP_BASE_NAME='vite項(xiàng)目'
? ?1.2使用
? ?Vite 在一個(gè)特殊的 import.meta.env 對(duì)象上暴露環(huán)境變量。這里有一些在所有情況下都可以使? ? ? ?用的內(nèi)建變量：?文章來源：http://www.zghlxwxcb.cn/news/detail-459254.html
import.meta.env.MODE: {string} 應(yīng)用運(yùn)行的模式。
import.meta.env.BASE_URL: {string} 部署應(yīng)用時(shí)的基本 URL。他由base 配置項(xiàng)決定。
import.meta.env.PROD: {boolean} 應(yīng)用是否運(yùn)行在生產(chǎn)環(huán)境。
import.meta.env.DEV: {boolean} 應(yīng)用是否運(yùn)行在開發(fā)環(huán)境 (永遠(yuǎn)與import.meta.env.PROD相反)文章來源地址http://www.zghlxwxcb.cn/news/detail-459254.html
到了這里，關(guān)于在vite或者vue-cli中使用.env[mode]環(huán)境變量的文章就介紹完了。如果您還想了解更多內(nèi)容，請(qǐng)?jiān)谟疑辖撬阉鱐OY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持TOY模板網(wǎng)！
