vite 中通过以 vite_ 开头的环境变量（如 vite_api_base_url）配置接口地址，仅该前缀变量会被注入客户端并构建时静态替换，确保不泄露敏感信息；需在 .env 文件定义、代码中用 import.meta.env 读取，并推荐配合 typescript 类型声明增强安全性。
在 Vite 中使用环境变量配置接口地址，核心是通过 .env 文件定义变量，并用 import.meta.env 在代码中读取。Vite 默认只暴露以 VITE_ 开头的变量，且构建时会被静态替换，**不会泄露到客户端**（除非你主动暴露）。
1. 创建环境变量文件并定义接口地址
在项目根目录下创建 .env、.env.development 和 .env.production 等文件：
-
.env（通用默认值）：VITE_API_BASE_URL=https://api.example.com -
.env.development（开发环境）：VITE_API_BASE_URL=http://localhost:3000/api -
.env.production（生产环境）：VITE_API_BASE_URL=https://prod-api.yoursite.com
⚠️ 注意：只有以 VITE_ 开头的变量才会被注入到客户端代码中；其他如 NODE_ENV 或 API_KEY 不会自动暴露。
2. 在代码中安全读取并封装请求基础地址
推荐在统一的请求模块（如 src/utils/request.ts）中读取并配置：
- 直接使用
import.meta.env.VITE_API_BASE_URL，它在构建时被替换为字符串字面量 - 建议加一层判断，避免未定义时报错：
const baseURL = import.meta.env.VITE_API_BASE_URL ?? '/api'; - 配合 Axios 示例：
axios.create({ baseURL });
3. 验证变量是否生效
可在组件或工具函数中临时打印验证：
console.log('当前 API 地址:', import.meta.env.VITE_API_BASE_URL);- 启动开发服务器（
npm run dev）后，控制台应输出http://localhost:3000/api - 构建后（
npm run build），检查生成的 JS 文件，确认该变量已被替换成实际字符串，而非引用表达式
4. 进阶：多环境 + 类型提示（TypeScript）
若用 TypeScript，可增强类型安全：
- 在
src/env.d.ts中补充声明：interface ImportMetaEnv {<br> readonly VITE_API_BASE_URL: string;<br>} - 确保
tsconfig.json的types包含"vite/client"和你的env.d.ts
这样编辑器能识别变量，避免拼写错误，也防止运行时访问不存在的 env 属性。
Java免费学习笔记：立即使用
解锁 Java 大师之旅：从入门到精通的终极指南
