Vue JS загрузка файла JS в подключенном () хук - PullRequest
Новая
       10

Vue JS загрузка файла JS в подключенном () хук

0 голосов
/ 27 сентября 2018

У меня есть компонент 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 в хуке жизненного цикла?

Ответы [ 2 ]

0 голосов
/ 27 сентября 2018

Я немного не уверен, о чем ты спрашиваешь.Но если вы просто пытаетесь включить внешний 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>

Решает ли это вашу проблему?

0 голосов
/ 27 сентября 2018

Это шаблон, который я использую.В этом примере импортируется файл js, содержащий IIFY, который создает экземпляр объекта на window.

Единственная проблема с этим может возникнуть, если вы хотите использовать SSR, и в этом случае вам необходим компонент <ClientOnly> Vue, см. Ограничения доступа API браузера 

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

Обратите внимание, что он также работает с установленными библиотеками npm, с теми же соглашениями о пути, т.е. не относительный путь указывает на то, что библиотека находится в node_modules.

...