webpack Vue js在mounted()钩子中加载js文件

tkclm6bt  于 2023-01-13  发布在  Webpack
关注(0)|答案(2)|浏览(296)

我有以下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文件呢?

xtfmy6hx

xtfmy6hx1#

这是我使用的模式,这个例子是导入一个js文件,其中包含一个IIFY,它示例化window上的一个对象。
唯一的问题是如果您想使用SSR,那么您需要Vue的<ClientOnly>组件,请参见Browser API Access Restrictions

mounted() {
  import('../public/myLibrary.js').then(m => {
    // use my library here or call a method that uses it
  });
},

注意,它也适用于npm安装的库,具有相同的路径约定,即非相对路径表示库在node_modules下。

tjvv9vkg

tjvv9vkg2#

我有点不确定你的要求,但是如果你只是想在你的页面中包含一个外部js文件,你可以只在你的模板中使用script标签,而不必在你的mounted函数中放置任何东西,就像这样:

<template>
  <div id="wrapper">
    <div class="main-container">
      <Header />
      <router-view/>
      <Footer/>
    </div>
    <script src="./assets/js/otherjsfile.js"></script>
  </div>
</template>

<script>

import './assets/js/popper.min.js';
// other imports
// ....
export default {
  name: 'App',
  components : {
    Header,
    Footer
  },
}
</script>

这是否解决了您的问题?

相关问题