[TOC] #### 1. 環(huán)境變量聲明規(guī)范 ---- 在 Vue3 項(xiàng)目中獲取 `.env` 文件中的配置項(xiàng)，需要遵守以下步驟和規(guī)范 變量前綴：使用 `VITE_` 作為自定義環(huán)境變量的前綴（Vite 默認(rèn)要求），否則變量無法被客戶端訪問 ```ini # .env.development VITE_API_URL = http://localhost:3000/api ``` 文件命名規(guī)則： | 命名規(guī)則 | 描述 | | ------------ | ------------ | | .env | 全局默認(rèn)配置，所有環(huán)境都會(huì)加載 | | .env.[model] | 按模式加載（如：.env.dev、.env.prod） | | .env.local | 本地覆蓋文件（優(yōu)先級(jí)高于 .env，但會(huì)被 git 忽略） | #### 2. 在代碼中獲取環(huán)境變量 ---- 第一種方式：通過 `import.meta.env` 訪問 在 Vue 組件或 JS/TS 文件中直接使用，可以讀取到所有環(huán)境變量（僅 `VITE_` 前綴的變量可通過此方式獲?。? ```javascript const env = import.meta.env ``` 第二種方式：在 Vite 配置文件中使用 在 `vite.config.ts` 中通過 `loadEnv` 加載環(huán)境變量 特別注意：此方法支持讀取所有環(huán)境變量，包含非 `VITE_` 前綴的變量 ```javascript import { defineConfig, loadEnv } from 'vite'; export default defineConfig(({ mode }) => { const env = loadEnv(mode, process.cwd()); console.log(env.VITE_API_URL); // 輸出配置值 return { /* 其他配置 */ }; }); ``` #### 3. 運(yùn)行模式和文件匹配 ---- 默認(rèn)模式： + `npm run dev` 默認(rèn)加載：`.env.development` + `npm run build` 默認(rèn)加載：`.env.production` 自定義模式：通過 `--mode` 參數(shù)指定模式 ```json // package.json { "scripts": { // 此時(shí)會(huì)加載 .env.test 文件 "build:test": "vite build --mode test" } } ``` #### 4. 高級(jí)配置 ---- 自定義變量前綴：變量前綴默認(rèn)是 `VITE_` 可以在 vite.config.ts 文件中修改 envPrefix，此時(shí)需在 .env 文件中聲明 `APP_` 前綴的變量 ```javascript export default defineConfig({ envPrefix: 'APP_' // 變量需以 APP_ 開頭 }); ``` 多環(huán)境文件優(yōu)先級(jí)：同名變量?jī)?yōu)先級(jí)高的文件會(huì)覆蓋低優(yōu)先級(jí)文件中的值 ``` .env.[mode].local > .env.[mode] > .env.local > .env ``` #### 5. 注意事項(xiàng) ---- **一、敏感信息安全** 避免在客戶端暴露敏感信息（如數(shù)據(jù)庫密碼），`VITE_` 前綴的變量會(huì)被編譯到前端代碼中 **二、類型提示支持（此配置可避免 TypeScript 報(bào)錯(cuò)）** 在 src 目錄下創(chuàng)建 env.d.ts 文件以增強(qiáng) TypeScript 類型提示 ```typescript interface ImportMetaEnv { readonly VITE_API_URL: string; } ```