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

在我的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）

时，它是未定义的。如果我将超时设置为1秒，它将输出变量

---

我可以在Vue.js中做些什么来“等待”脚本加载，这样它就可以在其他Vue组件加载之前加载？

您可以使用Vue提供的

beforeCreate（）

生命周期并从那里加载脚本

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

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

您还可以在此处找到其他适合您需要的生命周期：

---

另外，在main.js中调用

LoadScript

this将确保在加载任何组件之前完成加载

您可以使用

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

或者承诺的

那么

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

---

在我的例子中，问题是通过“窗口”范围解决的。此外，如果需要访问“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>

从“vuex”导入{mapActions}；
导出默认值{
名称：“付款”，
方法：{
…映射操作（[“aVueAction”]）
},
创建（）{
让paywayScript=document.createElement（“脚本”）；
让自我=这个；
paywayScript.onload=（）=>{
//调用Vuex操作。
self.aVueAction（）；
//调用脚本函数
window.payway.aScriptFunction（）；
};
//paywayScript.async=true；
paywayScript.setAttribute(
“src”，
"https://api.payway.com.au/rest/v1/payway.js"
);
document.body.appendChild（paywayScript）；
}
};

---

我在Vue 2.6上使用过它。

我不能这样做，因为main.js中的所有

import

语句都必须是顶级的，这意味着它们不能在异步函数中，或者。然后。@Wayne如何从外部脚本调用方法？这很奇怪，因为我在main.js中调用了LoadScript，但问题仍然存在。这是我的main.js文件（指向Google Drive的链接）：您是否尝试过使用beforeCreate生命周期？我想那将是你问题的解决办法。您可以在app.vue（或您的启动组件）上使用beforeCreate，以便在安装所有其他组件之前该组件可用loaded@Jochem如何从外部脚本调用方法？