Vite + React项目读取环境变量返回undefined问题咨询

Vite 出于客户端代码安全隔离的设计，默认仅会将以VITE_为前缀的自定义环境变量注入到客户端侧的import.meta.env对象中。你当前定义的HOST变量未携带要求的前缀，因此不会被Vite暴露给前端代码，读取时自然返回undefined。

• 修改根目录下.env文件的变量名，补充规定前缀：

# .env
VITE_HOST=127.0.0.1:8000

• 调整组件代码中的变量读取语句，匹配修改后的变量名：

console.log('HOST:', import.meta.env.VITE_HOST)

• 完全终止当前运行的Vite开发服务，重新执行启动命令（npm run dev/pnpm dev等），环境变量修改不会触发热更新，必须重启服务才能加载新的变量配置。

• 确认.env文件真实文件名：Windows系统默认隐藏已知文件扩展名，容易出现误将文件命名为.env.txt的情况，可直接在代码编辑器的文件树中确认文件名，确保后缀无多余内容。
• 确认.env文件位置：必须和package.json、vite.config.js处于同级根目录，从你贴出的目录结构来看这部分配置是正确的。
• 若不想使用VITE_作为前缀，可在vite.config.js中通过envPrefix配置项自定义暴露前缀，但注意不要直接使用HOST、PORT这类和系统内置环境变量重名的无前置标识变量，会存在敏感信息泄露的安全风险。
• 注意VITE_开头的变量仅会被注入到客户端构建流程处理的代码中，在Vite配置文件、Node端服务逻辑中读取这类变量不会生效。

内容的提问来源于stack exchange，提问作者mrpbennett