Vite构建React项目后import.meta.env变量为undefined问题排查

• 检查.env文件位置
  确保.env文件放在项目根目录（和package.json、vite.config.js同级），不能放在src或其他子文件夹下。Vite默认只会加载根目录下的环境配置文件。

• 确认环境变量命名与拼写
  Vite要求客户端可访问的环境变量必须以VITE_开头，你这里的VITE_BASE_URL命名符合规则，但要保证代码里的import.meta.env.VITE_BASE_URL和配置文件中的变量名拼写、大小写完全一致，不能有笔误。

• 重启Vite服务后再执行构建
  修改.env文件后，Vite不会自动重新读取配置。先停止当前的开发/构建进程，重新启动Vite服务，再执行构建命令（npm run build）。

• 检查vite.config.js的envDir配置
  如果你的vite.config.js中自定义了envDir字段（指定了环境变量文件的目录），那.env必须放在这个指定目录下。示例：

  // vite.config.js
  export default defineConfig({
    envDir: './config' // 此时.env需放在项目根目录的config文件夹内
  })
  

  未配置该字段可忽略此条。

• 区分环境对应的配置文件
  生产环境构建时，Vite会优先加载.env.production文件，如果该文件存在且未定义VITE_BASE_URL，会覆盖.env中的配置。若无需区分环境，只需确保.env内的变量配置正确即可。

• 验证构建产物
  构建完成后，打开dist目录下的打包JS文件，搜索VITE_BASE_URL，查看是否被替换为http://localhost:5000。若未替换，说明Vite未读取到环境变量，回到前面的步骤重新排查。

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