在加载组件之前加载外部脚本 - 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组件后加载外部脚本externalScriptVariable时，会出现未定义的情况。如果我设置setTimeout为1秒，则可以正常输出变量。

在Vue.js中，我该如何等待脚本加载以确保它在每个其他Vue组件之前加载？

- Matěj Holubec

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
});

- Wayne

---

我无法这样做，因为main.js中的所有import语句都必须是顶级的，这意味着它们不能在异步函数或.then中。 - Matěj Holubec

@Wayne 你如何从外部脚本调用一个方法？ - sunwarr10r

Answer 2

在我的情况下，问题通过“window”作用域得到了解决。此外，如果您需要在“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上使用过这个。

- Alex

Answer 3

你可以使用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 可以确保在任何组件加载之前完成。

- Jochem

---

很奇怪，因为我在main.js中调用了LoadScript，但问题仍然存在。 这是我的main.js文件（Google Drive链接）：https://drive.google.com/file/d/1cruKTZ606QsDIrD_74HY-FQi86nldCK5/view?usp=sharing - Matěj Holubec

你尝试过使用 beforeCreate 生命周期吗？我认为这将是解决你问题的方法。你可以在 app.vue（或你的起始组件）中使用 beforeCreate，这样它会在所有其他组件加载之前可用。 - Jochem

@Jochem 你如何从外部脚本调用一个方法？ - sunwarr10r