如何在Vuejs中访问外部js的方法或对象

问题描述

我想添加外部 js（使用 cdn）但我无法访问方法。

我添加了挂载钩子（我认为这不是最佳做法）：

mounted() {
let leafMap = document.createElement("script");
leafMap.setAttribute(
  "src","https://unpkg.com/leaflet@1.7.1/dist/leaflet.js"
);
document.head.appendChild(leafMap);
}

我可以通过 vue 方法访问，例如：

window.L //window.<packageName>

但是 window.L 在创建页面时未定义。所以我应该等待脚本加载。我该如何处理这个过程？

解决方法

created 钩子出现在 mounted 钩子之前，您已经在其中添加了脚本，因此 window.L 在那里不可用。

脚本已经在 load 事件上运行，因此您可以添加一个 load 事件处理程序，您可以在其中使用 window.L：

let leafMap = document.createElement("script");
leafMap.setAttribute(/*...*/);
leafMap.addEventListener("load",() => {
  console.log("L",window.L);
});
document.head.appendChild(leafMap);