javascript - 如何在 vue.js 中包含第 3 方 JavaScript 文件？

Question

我已经花了一天多的时间寻找解决方案。我是 JavaScript 新手，所以也许我错过了针对经验丰富的 JS 开发人员的解决方案。 我需要在单个文件 vue 组件中使用的第 3 方脚本(或者在我的应用程序中全局使用，如果这是唯一的方法)具有以下模式:

(function (win) {
  win.MyUtil = {
    "func1": function func1() { ... },
    "func2": function func1() { ... }
  }
}(window));

这扩展了浏览器的 Window 对象，以便 MyUtil 全局可见，对吧？

然后我在 index.html 文件的头部添加了一个脚本标签:

脚本文件位于/my_project_folder/src/assets 中。我还在 src 属性中尝试了许多不同的路径(例如“./assets/my_util.js”或“<%= BASE_URL %>/assets/my_util.js”)并将文件移动到不同的实际文件夹。 我在某处读到应该有一个文件夹“/my_project/static”。我试过了。

结果总是一样的。浏览器显示此警告(我自己翻译成英文): “脚本‘http://localhost:8080/@/assets/my_util.js’已加载，尽管其 MIME 类型 (text/html) 不是 JavaScript 的有效 MIME 类型。” 我认为这表明脚本实际上已加载。当然，我也尝试指定正确的 MIME 类型，但没有成功。但是，当我将警报(“my_util”)添加到脚本时，没有显示任何消息。

然后，我的 vue 组件中的代码抛出错误“ReferenceError:MyUtil 未定义”。 这种情况发生在“mounted” Hook 中，但稍后也会发生在按钮单击中，因此这不是加载顺序的问题。

这里出了什么问题？我该如何修复它？

顺便说一句，它在纯 html 中工作得很好。

Answer 1

似乎没有真正的解决方案，这意味着不修改原始第3方脚本就没有解决方案。 原因是第 3 方脚本包含“立即调用函数表达式”(IIFE):

(function (win) {
  win.MyUtil = {
    "func1": function func1() { ... },
    "func2": function func1() { ... }
  }
}(window));

所以我不得不修改第三方脚本，这是我想避免的。感谢Rishinder(VPaul)指出了正确的方向。 现在它是一个导出对象的“模块”:

var MyUtil
export default MyUtil = {
  func1: function() { ... },
  func2: function() { ... }
}

在 Vue.js 单文件组件文件 (*.vue) 中，可以像这样导入它(如果它与 *.vue 文件位于同一文件夹中):

<script>
    import MyUtil from "./my_util.js"
    // code using MyUtil goes here
</script>