如何在 vue.js 中包含 3rd 方 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) 不是有效的 MIME 类型用于 JavaScript。” 我认为这表明脚本实际上已加载。当然，我也尝试过指定正确的 MIME 类型，但没有成功。但是，当我将 alert("my_util") 添加到脚本时，没有显示任何消息。然后我的 vue 组件中的代码会引发错误“ ReferenceError: MyUtil is not defined ”。这发生在“已安装”钩子中，但稍后在按钮单击中也会发生，因此这不是加载顺序的问题。这里出了什么问题？我该如何解决？顺便说一句，它在纯 html 中运行良好。

Answer 1

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

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

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

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

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

我希望这有帮助。

Answer 2

似乎没有真正的解决方案，这意味着不修改原始 3rd 方脚本就没有解决方案。原因是第 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>