javascript - 如何在 Vue 中加载 cdn 并访问它的对象？

Question

我必须加载一个外部 javascript 文件才能访问某个对象。

通常代码很简单:

<script src='https://example.com/example.js'></script>

<script>

  var instance = new ExampleObj.start({ container: 'element-id' });

</script>

<div id='element-id'></div>

如何在 .vue 文件中完成此操作？

这没有用:

export default {
  ...
  mounted() {
    const script = document.createElement('script')

    script.setAttribute('src', 'https://example.com/example.js')

    const start = document.createElement('script')

    start.text = `var instance = new ExampleObj.start({ container: 'element-id' });`

    document.body.appendChild(script)
    document.body.appendChild(start)
  }
  ...
}

上面的 ^ 示例给出了错误:ExampleObj not defined，但是如果我尝试访问 ExampleObj，它会显示在开发人员控制台上，并带有 start 方法工作。

Answer 1

请按照以下步骤操作:

1. 在 vue.js 脚本上方的 index.html 中添加 CDN 脚本。我会把它放在头部结束标记之前:

<script src='https://example.com/example.js'></script> </head>

1. 如果您使用 webpack - 添加到 externals这样你就可以将它导入到你的 vue 组件中。
2. 如果您不使用 webpack - 在您的 mounted () 函数中使用 window.ExampleObject 访问 JS 对象。