Vue 3 + Vite环境下无法使用.env配置文件问题求助
2026-6-27
解决Vite环境变量无法读取的问题
核心排查与修复步骤
- 确认文件位置：
.env和.env.development必须放在项目根目录（与vite.config.js、package.json同级），不能放在src或其他子目录下。 - 检查变量格式：确保变量名无多余空格，比如不要写成
VITE_API_KEY = "1234"，你的现有配置格式没问题，但需再次确认无此类拼写失误。 - 重启开发服务器：修改
.env文件后必须重启Vite服务，否则新变量不会被加载。 - 验证启动模式：查看
package.json的dev脚本，应为"dev": "vite"——Vite默认开发模式会加载.env.development，若手动指定了其他模式（如vite --mode test），则会对应加载.env.test而非.env.development。 - 检查Vite配置：若
vite.config.js中配置了envDir，需确保其指向.env文件所在目录，默认是项目根目录，若自定义了路径需对应调整。 - 确认使用场景：
import.meta.env仅能在客户端代码中使用，不能在vite.config.js里调用（配置文件中需用loadEnv方法加载变量）。
验证方法
在组件的setup中打印环境变量对象，确认是否包含目标变量：
console.log(import.meta.env)
若输出中无VITE_开头的变量，说明未加载成功，回到上述步骤逐一排查。
内容的提问来源于stack exchange，提问作者Takuhii
相关产品推荐
相关产品推荐
