在加載組件之前加載外部腳本 - Vue.js

Question

在我的 Vue 項目中，我想從服務器加載腳本（例如https://myurl.com/API.js ）。 該腳本包含一個變量，我想在我的 Vue 組件（視圖）中使用它。 問題是當我使用 loadScript 模塊加載該腳本時：

import Vue from 'vue'
import LoadScript from 'vue-plugin-load-script';

Vue.use(LoadScript);
Vue.loadScript('https://quvia.cz:4443/portalAPI.js')

然后在 Vue 組件之后加載它，因此當嘗試console.log(externalScriptVariable)時，它是未定義的。 如果我將 setTimeout 持續 1 秒，它會很好地輸出變量。

我可以在 Vue.js 中做什么來“等待”腳本加載，以便它會在所有其他 Vue 組件之前加載？

Answer 1

您可以使用async/await

import Vue from 'vue'
import LoadScript from 'vue-plugin-load-script';

Vue.use(LoadScript);

(async function() {
  await Vue.loadScript('https://quvia.cz:4443/portalAPI.js');
  // other things after script loaded
})(); 

或者諾言then

import Vue from 'vue'
import LoadScript from 'vue-plugin-load-script';

Vue.use(LoadScript);

Vue.loadScript('https://quvia.cz:4443/portalAPI.js').then(() => {
  // other things after script loaded
})
.catch(() => {
  // error
});

Answer 2

您可以做的是使用 vue 提供的beforeCreate()生命周期並從那里加載腳本。

import LoadScript from 'vue-plugin-load-script';

export default {
  name: "App",
  beforeCreate() {
    LoadScript('https://quvia.cz:4443/portalAPI.js')
  }
};

還有其他可能適合您需求的生命周期，您可以在此處找到： https ://v2.vuejs.org/v2/guide/instance.html

此外，在 main.js 中調用LoadScript將確保它在任何組件加載之前完成

Answer 3

就我而言，問題已通過“窗口”范圍解決。 此外，如果您需要訪問“onload”函數內的任何 Vue 元素，則需要為“this”實例創建一個新變量。

<script>
import { mapActions } from "vuex";
export default {
      name: "Payment",
      methods: {
        ...mapActions(["aVueAction"])
      },
      created() {
            let paywayScript = document.createElement("script");
            let self = this;
            paywayScript.onload = () => {
              // call to Vuex action.
              self.aVueAction();
              // call to script function
              window.payway.aScriptFunction();
            };
            // paywayScript.async = true;
            paywayScript.setAttribute(
              "src",
              "https://api.payway.com.au/rest/v1/payway.js"
            );
            document.body.appendChild(paywayScript);
      }
};
</script>

我在 Vue 2.6 上使用過這個。