1. 環(huán)境變量使用場(chǎng)景

• 區(qū)分不同的環(huán)境。在Vite中，我們可以使用環(huán)境變量來(lái)管理不同環(huán)境下的配置。Vite支持使用.env文件來(lái)配置環(huán)境變量，不同的環(huán)境可以使用不同的.env文件來(lái)管理配置。
• 當(dāng)做全局變量使用。用來(lái)判斷是開(kāi)發(fā)或者測(cè)試環(huán)境，展示不用的頁(yè)面、按鈕等等。

2. 創(chuàng)建.env文件

首先，我們需要在項(xiàng)目的根目錄下創(chuàng)建.env文件。.env文件中可以定義各種環(huán)境變量，例如API的地址、端口號(hào)等等。以下是一個(gè)簡(jiǎn)單的.env文件示例：

VITE_APP_DEV = 'dev-api'
VITE_APP_URL = 'http://192.168.0.0.1/api' 

注意：在vite中環(huán)境變量必須以VITE開(kāi)頭

3. 在應(yīng)用程序中使用環(huán)境變量

要在Vite的應(yīng)用程序中使用環(huán)境變量，我們可以使用import.meta.env對(duì)象來(lái)訪問(wèn)它們。例如，在組件中可以使用以下方式訪問(wèn)VITE_APP_TITLE環(huán)境變量：

// 在組件中可以通過(guò)這種方式來(lái)訪問(wèn)
<script setup lang="ts">
console.log(import.meta.env);
</script>

3.1. 輸出結(jié)果（開(kāi)發(fā)環(huán)境）：

3.2. 輸出結(jié)果（生產(chǎn)環(huán)境）：

• 運(yùn)行 npm run build 打包項(xiàng)目，生成 dist 文件
• 運(yùn)行 npm install http-server -g 安裝 http-server。（由于dist文件本地直接打開(kāi)會(huì)跨域（file文件協(xié)議不允許跨域），因此需要啟動(dòng)一個(gè)后臺(tái)服務(wù)）
• 運(yùn)行 http-server -p <端口號(hào)> -o，啟動(dòng)后臺(tái)服務(wù)
• 打開(kāi)頁(yè)面后，此時(shí)查看瀏覽器控制臺(tái)就可以看到如下的輸出信息

此處啟動(dòng)后臺(tái)服務(wù)方式很多?？梢允褂胔ttp-server，也可以使用nginx等其他方式

在這個(gè)示例中，我們使用import.meta.env來(lái)訪問(wèn)環(huán)境變量，并將其輸出到控制臺(tái)中。

4. 在 vite 中使用環(huán)境變量

另外，我們還可以在Vite的配置文件中使用環(huán)境變量。例如，可以在vite.config.js文件中使用以下方式訪問(wèn)環(huán)境變量：

在 vite.config.js文件測(cè)試 vite 獲取到的環(huán)境:

運(yùn)行 npm run dev 可以看到打印出的是 development

運(yùn)行 npm run build 可以看到打印出的是 production

vite 中不支持 import.mete.env，環(huán)境變量通常從 process 獲得。使用 Vite 導(dǎo)出的 loadEnv 函數(shù)來(lái)加載指定的 .env 文件

更多請(qǐng)查看vite官方中文文檔

到此這篇關(guān)于vite環(huán)境變量.env文件的配置及使用的文章就介紹到這了,更多相關(guān)vite env配置內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

最新評(píng)論