Vuejs 通过使用计算来工作，但不能使用 heroku 上的数据

Question

我的 vue 页面正在加载一个嵌入的 wistia 视频，该视频 url 是一个 ENV 变量。当我将视频 url 分配给 vue 数据属性时，它不起作用，因为我可以看到 url 值在挂载时未定义。

  data: function () {
    return {
      videoUrl: process.env.VUE_APP_VIDEO_URL,
    }
  },

  mounted() {
    console.log(`video url: ${this.videoUrl}`);
  },

但是，如果我将视频 link 分配给计算属性，它将正常工作。

computed: {
  videoUrl() {
    return process.env.VUE_APP_VIDEO_URL;
  }
}

<div class="wistia_responsive_padding" style="padding:55.94% 0 0 0;position:relative;" v-if="videoUrl">
    <div class="wistia_responsive_wrapper" style="height:100%;left:0;position:absolute;top:0;width:100%;">
        <iframe :src="videoUrl" title="Welcome Video" allow="autoplay; fullscreen" allowtransparency="true" frameborder="0" scrolling="no" class="wistia_embed" name="wistia_embed" allowfullscreen msallowfullscreen width="100%" height="100%"></iframe>
    </div>
</div>

我猜 vue 数据很早就被求值了，但它是否早于 ENV 变量被加载？有人可以解释一下吗？

注意：只有当我将我的应用程序部署到 heroku 时才会出现此问题。

Answer 1

你总是可以这样做：

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

Vuejs 通过使用计算来工作，但不能使用 heroku 上的数据

Vuejs works by using computed but does not work using data on heroku

javascript

vue.js

vuejs3

computed-properties