dom加载后执行 vue_如何在Vue完全加载和初始化后运行VueJS代码？

I am working on a Vue component that will be placed on multiple websites via a CMS system. The issue I encounter is that even if my js scripts loading order is correct, sometime I get this error:

Uncaught ReferenceError: Vue is not defined

at HTMLDocument.

Vue is loaded via cdn and it's above the component's code.

All the Vue code is run like this:

document.addEventListener("DOMContentLoaded", () => {

// here is the Vue code

});

I even added a setTimeout() inside the DOMContentLoaded event and still did not do the trick.

window.onload = function() did not work either in all cases. I still got that error from time to time.

The scripts are loaded in the body.

Do you have any idea what it can be another approach? I want to be sure that in the moment the Vue code is fired, Vue is loaded and ready to be initialized on the page.

Thank you!

解决方案

Use the load event to wait until all resources have finished loading:

window.addEventListener("load", function(event) {

// here is the Vue code

});

DOMContentLoaded is an event fired when the HTML is parsed and

rendered and DOM is constructed. It is usually fired pretty fast in

the lifetime of the app. On the other hand, load is only fired when

all the resources (images, stylesheets etc.) are retrieved from the

network and available to the browser.