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

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

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

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

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

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

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

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

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

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

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

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

此處啟動后臺服務(wù)方式很多。可以使用http-server，也可以使用nginx等其他方式

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

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

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

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

運行 npm run dev 可以看到打印出的是 development

運行 npm run build 可以看到打印出的是 production

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

更多請查看vite官方中文文檔

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

最新評論