仅在Vue完全加载并初始化后如何运行VueJS代码?

我正在研究Vue组件,该组件将通过CMS系统放置在多个网站上。我遇到的问题是,即使我的js脚本加载顺序正确,有时我也会收到此错误:

Uncaught ReferenceError: Vue is not defined
    at HTMLDocument.<anonymous>

Vue通过CDN加载,并且位于组件代码之上。

所有的Vue代码都是这样运行的:

document.addEventListener("DOMContentLoaded", () => {
  // here is the Vue code
});

我什至在DOMContentLoaded事件中添加了setTimeout(),但仍然无法解决问题。 window.onload = function()并非在所有情况下都有效。我仍然不时会收到该错误。脚本被加载到主体中。

您是否知道另一种方法是什么?我想确保在触发Vue代码的那一刻,Vue已加载并准备在页面上初始化。谢谢!

MandyEva2020/03/13 20:18:56

使用load事件等待所有资源完成加载:

<script>
  window.addEventListener("load", function(event) {
    // here is the Vue code
  });
</script>

进一步说明

DOMContentLoaded是在解析和呈现HTML并构造DOM时触发的事件。通常在应用程序的生命周期内启动速度非常快。另一方面,load仅当从网络上检索了所有资源(图像,样式表等)并可供浏览器使用时才会触发。

您还可以将load事件用于特定脚本