Vue部署到Heroku时data取环境变量为undefined但computed正常，求原理

问题原因解释 #

你的猜测并不准确。Vue CLI（以及绝大多数Vue工程化方案）的process.env环境变量是构建阶段静态注入的，本身不存在异步加载的逻辑，正常情况下data初始化时是可以直接取到值的。出现这个差异的核心原因是data和computed的求值时机不同：

• data函数在组件实例初始化阶段只会执行1次，返回的对象会作为响应式数据的初始值被固定下来，如果此时取值为undefined，后续不会自动更新
• computed是懒执行的，只有当它第一次被访问（也就是模板渲染判断v-if="videoUrl"的时候）才会求值，此时如果process.env.VUE_APP_VIDEO_URL已经有值就能正常返回

为什么仅Heroku部署时出现 #

这个问题和Heroku的构建/运行流程相关，常见的触发场景有两种：

1. 构建阶段未正确拿到环境变量：你在Heroku后台配置的Config Vars默认仅对运行时进程生效，如果你的build命令没有配置为继承环境变量，构建阶段process.env.VUE_APP_VIDEO_URL确实是空的，但你的项目可能配置了运行时注入环境变量的逻辑（比如通过HTML模板注入到window对象再代理到process.env），这个注入逻辑执行时机晚于组件data初始化，早于computed第一次求值
2. 环境变量配置规则问题：部分Heroku的Node.js构建包会在构建阶段清除自定义环境变量，仅保留白名单内的变量，你可以在构建日志中打印环境变量确认是否正常注入

修复方案 #

• 优先保留你当前的computed写法，本身是符合最佳实践的
• 如果要放在data里，可以在mounted钩子中手动赋值：

data() {
  return {
    videoUrl: ''
  }
},
mounted() {
  this.videoUrl = process.env.VUE_APP_VIDEO_URL
}

• 排查Heroku构建配置，确保VUE_APP_VIDEO_URL在构建阶段就能被正确读取，可以在vue.config.js中添加日志确认：

console.log('构建时VIDEO_URL:', process.env.VUE_APP_VIDEO_URL)

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