[TOC] #### 1. 环境变量声明规范 ---- 在 Vue3 项目中获取 `.env` 文件中的配置项，需要遵守以下步骤和规范 变量前缀：使用 `VITE_` 作为自定义环境变量的前缀（Vite 默认要求），否则变量无法被客户端访问 ```ini # .env.development VITE_API_URL = http://localhost:3000/api ``` 文件命名规则： | 命名规则 | 描述 | | ------------ | ------------ | | .env | 全局默认配置，所有环境都会加载 | | .env.[model] | 按模式加载（如：.env.dev、.env.prod） | | .env.local | 本地覆盖文件（优先级高于 .env，但会被 git 忽略） | #### 2. 在代码中获取环境变量 ---- 第一种方式：通过 `import.meta.env` 访问 在 Vue 组件或 JS/TS 文件中直接使用，可以读取到所有环境变量（仅 `VITE_` 前缀的变量可通过此方式获取） ```javascript const env = import.meta.env ``` 第二种方式：在 Vite 配置文件中使用 在 `vite.config.ts` 中通过 `loadEnv` 加载环境变量 特别注意：此方法支持读取所有环境变量，包含非 `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. 运行模式和文件匹配 ---- 默认模式： + `npm run dev` 默认加载：`.env.development` + `npm run build` 默认加载：`.env.production` 自定义模式：通过 `--mode` 参数指定模式 ```json // package.json { "scripts": { // 此时会加载 .env.test 文件 "build:test": "vite build --mode test" } } ``` #### 4. 高级配置 ---- 自定义变量前缀：变量前缀默认是 `VITE_` 可以在 vite.config.ts 文件中修改 envPrefix，此时需在 .env 文件中声明 `APP_` 前缀的变量 ```javascript export default defineConfig({ envPrefix: 'APP_' // 变量需以 APP_ 开头 }); ``` 多环境文件优先级：同名变量优先级高的文件会覆盖低优先级文件中的值 ``` .env.[mode].local > .env.[mode] > .env.local > .env ``` #### 5. 注意事项 ---- **一、敏感信息安全** 避免在客户端暴露敏感信息（如数据库密码），`VITE_` 前缀的变量会被编译到前端代码中 **二、类型提示支持（此配置可避免 TypeScript 报错）** 在 src 目录下创建 env.d.ts 文件以增强 TypeScript 类型提示 ```typescript interface ImportMetaEnv { readonly VITE_API_URL: string; } ```