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

Question

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

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

这扩展了浏览器的 Window object，这样 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) 不是有效的 MIME 类型对于 JavaScript。” 我认为这表明脚本实际上已加载。 当然，我也尝试过指定正确的 MIME 类型，但没有成功。 但是，当我将 alert("my_util") 添加到脚本时，没有显示任何消息。

然后我的 vue 组件中的代码会引发错误“ ReferenceError: MyUtil is not defined ”。 这发生在“已安装”钩子中，但稍后在按钮单击中也会发生，因此这不是加载顺序的问题。

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

顺便说一句，它在普通的 html 中工作正常。

Answer 1

我认为您正在尝试以最天真的方式使用 VueJS，在 html 的脚本标签中导入 vuejs。

并不是说它有什么问题。 但是，这种方式限制了您利用 Vue 提供的灵活性。 最好的方法是使用 NPM 或 vue-cli 安装 vue（ https://v2.vuejs.org/v2/guide/installation.html ）。

使用 vue-cli 或 NPM（或带有 babel 或 webpack 的 vuejs）设置项目后，它允许您使用 es6 导入语法，尤其是在使用单个文件组件时（ https://v2.vuejs.org/v2/guide /single-file-components.html ）。 在这种风格中，您的组件存在于它们自己的文件中，并且每个组件都有一个<script>块，您可以在其中导入内容。

但是，您需要学习如何创建您的第一个 Vue 组件，然后才能像在行业中一样使用 VueJS。 您可以按照 VueJS 文档 ( https://v2.vuejs.org/v2/guide/ ) 做同样的事情。

创建组件后，您需要了解计算道具 () https://v2.vuejs.org/v2/guide/computed.html以及如何使用计算道具在模板中使用导入的文件/类。 有很多东西要学:)

我希望这有帮助。

Answer 2

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

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

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

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>