如何在 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>