我有以下Vue组件:
<template>
<div id="wrapper">
<div class="main-container">
<Header />
<router-view/>
<Footer/>
</div>
</div>
</template>
<script>
import './assets/js/popper.min.js';
// other imports
// ....
export default {
name: 'App',
components : {
Header,
Footer
},
mounted(){
// this is syntax error
import './assets/js/otherjsfile.js'
}
}
</script>
从代码片段中可以清楚地看到,我希望在mounted()
钩子中加载otherjsfile.js
,该脚本文件具有某些IIFEs,这些IIFEs期望网页的html被完全加载。
那么我如何在生命周期钩子中调用js文件呢?
2条答案
按热度按时间xtfmy6hx1#
这是我使用的模式,这个例子是导入一个js文件,其中包含一个IIFY,它示例化
window
上的一个对象。唯一的问题是如果您想使用SSR,那么您需要Vue的
<ClientOnly>
组件,请参见Browser API Access Restrictions注意,它也适用于npm安装的库,具有相同的路径约定,即非相对路径表示库在node_modules下。
tjvv9vkg2#
我有点不确定你的要求,但是如果你只是想在你的页面中包含一个外部js文件,你可以只在你的模板中使用
script
标签,而不必在你的mounted
函数中放置任何东西,就像这样:这是否解决了您的问题?