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>

从代码片段可以清楚地看出，我想将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>

这可以解决您的问题吗？

Vue JS在Mounted（）挂钩中加载js文件

2 个答案: