Vite部署的Vue应用无法加载根目录.env环境变量（后端为Rails API）

核心问题分析 #

你遇到的import.meta.env.VITE_BACKEND_URL返回undefined，本质是Vite没有正确读取到.env.development中的环境变量，结合你用Rails启动的场景，主要排查方向如下：

1. 移除多余的dotenv依赖 #

Vite（包括Rails集成的vite_rails）已内置dotenv环境变量处理能力，无需单独安装dotenv包，先卸载避免冲突：

npm uninstall dotenv

2. 确认.env文件的位置与格式 #

• .env.development必须放在项目根目录（与Rails的Gemfile、前端的package.json同级）
• 变量名必须严格以VITE_开头，你的配置VITE_BACKEND_URL=http://localhost:3000符合要求，注意不要给值加引号（除非值本身包含空格）

3. 修正Rails集成Vite的启动方式 #

如果你的Vue是通过vite_rails集成到Rails项目中的，直接用RAILS_ENV=development rails s启动，Vite的环境变量可能不会被加载——因为Vite的环境变量需要由Vite的构建进程读取，而非Rails进程。正确的启动方式二选一：

• 方式一：单独启动Vite开发服务，再启动Rails

  # 终端1启动Vite
  bin/vite dev
  # 终端2启动Rails
  RAILS_ENV=development rails s
  

• 方式二：使用vite_rails提供的联合启动命令（部分版本支持）

  RAILS_ENV=development bin/rails vite:dev
  

4. 清除缓存并重启服务 #

• 关闭所有运行的Rails和Vite服务
• 删除Vite缓存目录：
  • Rails集成场景：删除tmp/vite目录
  • 纯Vue场景：删除node_modules/.vite目录
• 重新按正确方式启动服务

5. 验证环境变量注入情况 #

在Vue项目的index.html中添加调试代码，确认环境变量是否被正确注入：

<script>
  console.log('注入的环境变量:', import.meta.env.VITE_BACKEND_URL)
</script>

如果这里也返回undefined，重点检查.env文件位置和Vite的启动进程是否正常。

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