Heroku部署Vue-Vite应用：Vite环境变量返回undefined问题求助

核心原因 #

Vite在构建阶段会将VITE_前缀的环境变量注入到代码中，Heroku部署时如果构建流程无法读取到配置的Config Vars，就会导致变量最终为undefined。以下是针对性的解决方案：

1. 确认构建阶段能获取到Config Vars #

• 修改项目package.json中的build脚本，添加变量打印命令，验证构建时是否能读取到目标变量：

  "scripts": {
    "build": "echo $VITE_GOOGLE_CLIENT_ID && vite build"
  }
  

• 重新部署后，通过heroku logs --tail查看构建日志：
  • 如果日志中打印出了变量的实际值，说明构建阶段已成功读取；
  • 如果日志为空或显示undefined，请检查Heroku的Config Vars是否正确设置（注意变量名是否带VITE_前缀，拼写是否完全一致）。

2. 对齐本地与Heroku的Node版本 #

本地和Heroku使用的Node版本差异可能导致环境变量处理逻辑不一致：

• 在项目根目录创建.nvmrc文件，写入本地使用的Node版本（比如v18.17.0）；
• Heroku会自动识别该文件并使用对应版本运行构建命令。

3. 检查Vite配置是否干扰变量注入 #

打开vite.config.ts，确认没有自定义define选项覆盖环境变量：

• 避免类似以下的错误配置：

  export default defineConfig({
    define: {
      'import.meta.env.VITE_GOOGLE_CLIENT_ID': '""' // 会覆盖实际变量
    }
  })
  

4. 验证构建产物中的变量注入情况 #

• 通过heroku run bash进入应用容器，将dist目录下的静态文件下载到本地；
• 在静态文件中搜索VITE_GOOGLE_CLIENT_ID，如果能找到替换后的实际值，说明构建阶段已注入成功，问题可能出在其他环节；如果搜索不到，回到步骤1重新排查构建流程。

代码说明 #

你提供的main.ts代码写法完全正确：

const app = createApp(App);
app.use(vue3GoogleLogin, {
  clientId: import.meta.env.VITE_GOOGLE_CLIENT_ID
})
app.use(router);
app.mount('#app');

问题不在代码本身，重点排查Heroku的构建流程是否正确传递了环境变量。

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