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

JavaScript

Itachi猪猪Green

2020-03-13

我正在研究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已加载并准备在页面上初始化。谢谢！

第1539篇《仅在Vue完全加载并初始化后如何运行VueJS代码？》来自Winter(https://github.com/aiyld/aiyld.github.io)的站点

共1个回答
MandyEva 2020.03.13

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

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

进一步说明

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

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

相似问题

0 回答

0 回答

5 回答

25 回答

0 回答

0 回答

问题类别

JavaScript Ckeditor Python Webpack TypeScript Vue.js React.js ExpressJS KoaJS CSS Node.js HTML Django 单元测试 PHP Asp.net jQuery Bootstrap IOS Android