在我的 Vue 项目中,我想从服务器加载一个脚本(例如 https://myurl.com/API.js
)。
该脚本包含一个变量,我想在我的 Vue 组件( View )中使用它。
问题是当我使用 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 组件之前加载?
最佳答案
您可以使用 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
})();
或 promise 的
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
});
关于javascript - 在加载组件之前加载外部脚本 - Vue.js,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/60990029/