vite环境变量配置核心是文件位置、命名规则和代码访问方式：根目录下.env通用，.env.development和.env.production分别用于开发与生产，仅vite_开头变量可通过import.meta.env安全访问。
vite 前端构建时的环境变量配置，核心是让不同环境（开发、测试、生产）能自动加载对应参数，同时保证敏感信息不泄露、变量能被代码安全读取。关键就三点：文件位置、命名规则、代码访问方式。
环境变量文件放在哪？
全部放在项目根目录（和 `package.json` 同级），Vite 会自动识别并加载。常用文件有： - `.env`：所有环境都加载，适合放通用、非敏感配置（如 `VITE_APP_NAME=我的项目`） - `.env.development`：仅 `vite` 或 `npm run dev` 启动时生效 - `.env.production`：仅 `vite build` 时生效 - `.env.[mode]`：比如 `.env.staging`，配合 `vite build --mode staging` 使用 - `.env.local` 和 `.env.[mode].local`：本地专用配置，应加进 `.gitignore`，不提交到仓库变量名怎么写才有效？
默认只暴露以 `VITE_` 开头的变量给前端代码： - ✅ `VITE_API_BASE=https://api.example.com` → 可在代码中用 `import.meta.env.VITE_API_BASE` - ❌ `API_KEY=123456` → 不会被注入，`import.meta.env.API_KEY` 是 `undefined` - 如需改前缀，可在 `vite.config.ts` 中配置： ```ts export default defineConfig({ envPrefix: 'APP_' // 此时只有 APP_ 开头的变量才暴露 }) ``` ⚠️切勿设为 `envPrefix: ''`，否则所有变量都会暴露到浏览器，存在严重风险。怎么在代码里用？
直接通过 `import.meta.env` 访问，构建时会被静态替换（不是运行时读取）： ```ts // src/utils/request.ts const baseURL = import.meta.env.VITE_API_BASE || '/api'axios.create({ baseURL })
注意： - 必须用字面量属性名，`import.meta.env['VITE_API_BASE']` 或拼接 key 的方式无效 - `import.meta.env.MODE`、`import.meta.env.PROD` 等内置变量始终可用，无需定义 <h3>构建时怎么指定环境？</h3> - 开发：默认走 `development` 模式，自动加载 `.env` + `.env.development` - 生产：`vite build` 默认走 `production` 模式，加载 `.env` + `.env.production` - 自定义模式：比如新增 `.env.test`，运行 `vite build --mode test` 即可 不复杂但容易忽略
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
