如何在vue.js中包含第三方JavaScript文件？

我已经花了一天多的时间寻找解决方案。我是JavaScript新手，所以我可能错过了有经验的JS开发人员提供的解决方案。 我需要在单个文件vue组件中使用的第三方脚本（如果这是唯一的方法，则在我的应用程序中全局使用）具有以下模式：

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

这扩展了浏览器的窗口对象，因此MyUtil是全局可见的，对吗

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

脚本文件位于/my_project_文件夹/src/assets中。我还在src属性中尝试了许多不同的路径（例如“/assets/my_util.js”或“/assets/my_util.js”，并将文件移动到不同的实际文件夹中。 我在某个地方读到应该有一个文件夹“/my_project/static”。我试过了

结果总是一样的。浏览器显示此警告（我自己翻译成英语）： 已加载脚本“”，但其MIME类型（text/html）不是JavaScript的有效MIME类型 我认为这表明脚本实际上已加载。当然，我也尝试指定正确的MIME类型，但没有成功。但是，当我向脚本添加警报（“my_util”）时，没有显示任何消息

然后，my vue组件中的代码抛出一个错误“ReferenceError:MyUtil未定义””。 这发生在“挂载”挂钩中，但也发生在稍后的按钮点击中，因此这不是装载顺序的问题

这里出了什么问题？我该怎么解决

---

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

我认为您正试图以最简单的方式使用VueJS，即在html的脚本标记中导入VueJS

不是说它有问题。但是，这种方式限制了您利用Vue提供的灵活性。最好的方法是使用NPM或Vue cli（）安装Vue

使用vue cli或NPM（或带有babel或webpack的vuejs）进行项目设置后，它允许您使用es6导入语法，尤其是在使用单文件组件（）时。在这种样式中，您的组件位于自己的文件中，每个组件都有一个

块，您可以在其中导入内容

但是，您需要先了解如何创建第一个Vue组件，然后才能像在行业中一样使用VueJS。您可以按照VueJS文档（）进行同样的操作

创建组件后，您需要了解computed props（）以及如何使用computed props在模板中使用导入的文件/类

---

我希望这会有所帮助。

似乎没有真正的解决方案，这意味着不修改原始第三方脚本就没有解决方案。 原因是第三方脚本由“立即调用的函数表达式”（IIFE）组成：

所以我不得不修改第三方脚本，这是我想要避免的。感谢Risminder（VPaul）指出了正确的方向。 现在是导出对象的“模块”：

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

在Vue.js单文件组件文件（*.Vue）中，可以这样导入（如果它与*.Vue文件位于同一文件夹中）：

从“/my_util.js”导入MyUtil
//这里是使用MyUtil的代码

如何加载脚本？您是将其导入VueJS组件中，还是将其作为

标记包含？我假设您正在使用VueCLI？您在

MyUtil

的定义中有一个语法错误：使用

将属性
func1
，
func2
与
，
从“@/assets/myu util.js”导入myu util
，然后在模板中使用，确保为导入的对象创建一个计算属性。否则，模板无法理解您导入的内容。@collapsar谢谢，我添加了逗号。谢谢。我将vueCLI与所有默认和推荐的插件一起使用：babel、eslint、prettier、router、cli服务。我已经学习了几个星期，我了解了基本知识。我的问题是vuejs.org上的文档质量差且混乱。例如，指向单文件组件页面的链接显示了一个带有src属性的标记。它并不表示允许使用多个脚本标记。因此，读者会得出结论，可能有一个带有code或src标记的脚本标记。在您之前的评论中，您建议使用“import”语句。在这个答案中，您建议使用“脚本”块来导入内容。在单个文件组件中，哪种方式是正确的？实际上，您链接的页面并没有阐明“计算道具”和“导入对象”之间的连接。你能详细说明一下吗？也许能给出几行代码？另一个问题是，我还需要向index.html文件添加脚本标记吗？很高兴听到您以正确的方式设置了项目。因此，组件中只有一个脚本标记。您可以使用扩展名
.vue
命名组件。没有必要更改html文件。由vue cli创建的只有一个容器可以让vue自行装载。应用程序安装在
main.js
中，根容器是
app.vue
。这是一个文件，您可以尝试我推荐的内容。vue文件的结构由标记和（如果需要）标记组成。每一个就一个。如vue文档中所述，在标记中导入库。我希望它能有所帮助。我在标记中添加了“import myutil from'@/assets/my_util.js'”。现在我得到了错误类型error:“\u assets\u myutil\u js\u网页包\u IMPORTED\u MODULE\u 0\u默认值a.func1不是一个函数”您写了一些关于将导入的对象添加到计算属性的内容。也许这会解决这个错误。我该怎么做？请注意，第三方脚本不会返回对象。它将其添加到窗口对象中。
var MyUtil
export default MyUtil = {
  func1: function() { ... },
  func2: function() { ... }
}

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