Vite配置的环境变量为什么在网页里读不到？-js教程-PHP中文网

Vite只注入以VITE_为前缀的环境变量到import.meta.env，其他变量被忽略；需确保.env文件位于根目录、命名匹配当前mode、变量名拼写正确，并在env.d.ts中声明类型。

vite配置的环境变量为什么在网页里读不到？

import.meta.env 里没有你定义的变量

Vite 默认只把以 VITE_ 开头的环境变量注入到 import.meta.env 中，其他变量（比如 API_URL、DB_HOST）会被完全忽略。这是安全机制，不是 bug。

常见错误现象：

console.log(import.meta.env.API_URL) 输出 undefined
变量明明写在 .env 里，但浏览器控制台就是看不到

解决办法只有两个：

把变量名改成 VITE_API_URL、VITE_DB_HOST 这样带前缀的形式
或者在 vite.config.js 里显式配置 envPrefix，比如 envPrefix: ['VITE_', 'MYAPP_']，然后用 MYAPP_API_URL

process.env 在浏览器里根本不能用

很多人习惯从 Node.js 项目迁过来，误以为 process.env 能在前端代码里直接访问。它在 Vite 的构建阶段可用（比如配置文件里），但在打包后的浏览器运行时是不存在的——process is not defined 就是这个原因。

典型误用场景：

在 src/utils/request.ts 里写 baseURL: process.env.VITE_API_BASE_URL
试图用 dotenv 插件让 process.env 在组件里生效

正确做法只有一个：必须通过 import.meta.env.VITE_XXX 访问，且该变量已在 .env 文件中以正确前缀声明。

Vite 6.4.5

Vite 6.4.5 历史版本 npm 官方下载，适合旧项目依赖固定、前端开发和生产环境构建。

下载

.env 文件没被加载或加载顺序错了

Vite 不会自动读取所有 .env 文件；它按优先级合并：先加载 .env，再覆盖性加载 .env.[mode]（如 .env.development）。如果你只写了 .env.production，但运行的是 vite --mode development，那里面的内容根本不会生效。

检查要点：

确认当前命令触发的 mode 值（console.log(import.meta.env.MODE)）
确保对应模式的文件存在且命名准确：.env.development，不是 .env.dev 或 .env-development
.env 文件必须放在项目根目录（即 package.json 所在目录），不在 src/ 下，也不在子文件夹里

环境变量在 vite.config.js 里能读，但页面里还是 undefined

这说明变量本身没问题，问题出在“暴露给客户端”这一步。Vite 在构建时会静态分析代码里的 import.meta.env.XXX 引用，只把实际用到的变量打包进去。如果变量名拼错了、大小写不一致（VITE_API_URL ≠ vite_api_url），或者用了动态拼接（import.meta.env[envKey]），它就无法识别，结果就是 undefined。

容易被忽略的细节：