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中做什么以“ await” 加载脚本，这样它就可以在所有其他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提供的take生命周期并从那里加载脚本。

beforeCreate()

还有其他一些可能满足您需求的生命周期，您可以在这里找到：https://vuejs.org/v2/guide/instance.html

此外，在main.js中调用import LoadScript from 'vue-plugin-load-script'; export default { name: "App", beforeCreate() { LoadScript('https://quvia.cz:4443/portalAPI.js') } };可以确保在加载任何组件之前完成

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 上使用过这个。

在加载组件之前先加载外部脚本-Vue.js

3 个答案: