Vite 仅自动暴露以 VITE_ 开头的环境变量，若在 .env 中定义 REACT_APP_API_KEY 并尝试通过 import.meta.env.REACT_APP_API_KEY 访问，将返回 undefined，导致 API 请求因无效密钥失败。
vite 仅自动暴露以 `vite_` 开头的环境变量，若在 `.env` 中定义 `react_app_api_key` 并尝试通过 `import.meta.env.react_app_api_key` 访问，将返回 `undefined`，导致 api 请求因无效密钥失败。
在 Vite 项目中，环境变量的注入机制与 Create React App（CRA）不同：*Vite 不识别 `REACTAPP前缀**，而是强制要求所有需在客户端代码中使用的环境变量必须以VITE开头。这是出于安全与构建时静态分析的设计考量——只有显式标记为VITE的变量才会被 Vite 注入到import.meta.env` 对象中，并参与构建过程。
✅ 正确配置步骤如下：
-
在项目根目录的 .env 文件中定义变量（注意前缀）：
VITE_REACT_APP_API_KEY=your_actual_tmdb_api_key_here
-
在代码中通过标准方式读取：
const apiKey = import.meta.env.VITE_REACT_APP_API_KEY;
// 验证是否成功加载（开发阶段建议添加校验） if (!apiKey) { throw new Error('❌ Missing VITE_REACT_APP_API_KEY in .env file'); }
const getMovies = () => { fetch(https://api.themoviedb.org/3/discover/movie?api_key=${apiKey}) .then((res) => { if (!res.ok) throw new Error(HTTP ${res.status}: ${res.statusText}); return res.json(); }) .then((json) => console.log('? Movies:', json)) .catch((err) => console.error('⚠️ API request failed:', err)); };
// 注意：useEffect 的依赖数组和清理逻辑需修正（原代码存在误用） useEffect(() => { getMovies(); // ✅ 应在挂载时调用，而非卸载时 }, []);
⚠️ **重要注意事项：** - `.env` 文件必须位于项目**根目录**（即 `vite.config.ts` 同级），且文件名严格为 `.env`（或 `.env.development` / `.env.production` 等模式专用文件）； - 变量名在代码中**必须完全匹配**（包括大小写），Vite 不做任何转换； - 所有 `VITE_` 变量在构建后会**硬编码进打包产物**，因此**切勿在 `VITE_` 变量中存放敏感凭证（如数据库密码、服务端密钥）**；TMDB 这类公开 API Key 属于客户端可暴露范畴，但应避免泄露高权限密钥； - 修改 `.env` 后需**重启开发服务器**（Vite 不会热重载环境变量变更）； - 可通过 `console.log(import.meta.env)` 在浏览器控制台验证变量是否注入成功。 ? 小结：Vite 的环境变量机制强调显式性与安全性。坚持使用 `VITE_` 前缀、规范命名、运行时校验，即可稳定接入第三方 API，避免“密钥明明写了却报错无效”的典型陷阱。
