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

Question

我有一个 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>

从代码 sn-p 可以清楚地看出，我希望将 otherjsfile.js 加载到 mounted() 挂钩中。该脚本文件具有某些 IIFE，它们期望网页的 html 被完全加载。

那么我如何在生命周期钩子中调用那个 js 文件呢？

Answer 1

这是我使用的模式。该示例正在导入一个包含 IIFY 的 js 文件，该文件在 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 下。

Answer 2

我有点不确定你在问什么。但是如果你只是想在你的页面中包含一个外部 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>

这能解决您的问题吗？