Vue.js应用中process.env无法关联Heroku配置变量如何解决

核心原因 #

Vue 属于前端单页应用，所有process.env读取的环境变量都是打包构建阶段静态注入到最终产物中的，打包完成后生成的是纯静态HTML/JS/CSS文件，无法读取Heroku运行时的系统环境变量。你之前的配置没有在构建阶段把Heroku的Config Vars注入到前端代码中，所以会一直走默认的localhost值。

排查&解决步骤 #

1. 确认环境变量命名规则匹配你的构建工具 #

• 若使用Vue CLI搭建项目：自定义环境变量必须以VUE_APP_为前缀，你当前使用的VUE_APP_API_ENDPOINT符合命名要求，无需修改
• 若使用Vite搭建项目：自定义环境变量必须以VITE_为前缀，你需要做两处修改：
  • Heroku Config Vars中把变量名改为VITE_API_ENDPOINT
  • 代码中读取逻辑改为：

  const apiEndpoint = import.meta.env.VITE_API_ENDPOINT || 'http://localhost:3000'
  

2. 确保构建阶段可读取到Heroku环境变量 #

场景1：前后端同仓部署，Node服务托管前端静态资源

• 检查项目根目录package.json的scripts字段，确认存在build脚本，且值为对应的前端打包命令：
  • Vue CLI项目："build": "vue-cli-service build"
  • Vite项目："build": "vite build"
• Heroku的Node.js官方构建包会在部署时自动执行npm run build命令，执行时会自动加载你配置的所有Config Vars作为环境变量，无需额外配置。

场景2：前端单独部署为Heroku静态站点

• 确保你已经安装了Heroku静态站点构建包，项目根目录添加static.json配置静态托管规则即可，构建阶段变量读取逻辑和上述同仓部署一致。

3. 重新触发部署生效 #

所有变量配置修改完成后，必须重新推送代码触发一次完整的Heroku构建流程，新的变量值才会被注入到新打包的前端静态文件中，修改才会生效。

验证方法 #

部署完成后打开站点，在浏览器控制台执行以下命令，确认输出为你配置的线上API地址即可：

• Vue CLI项目：console.log(process.env.VUE_APP_API_ENDPOINT)
• Vite项目：console.log(import.meta.env.VITE_API_ENDPOINT)

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