Vue 単一ファイルコンポーネントから外部JSライブラリを使用する

個人開発したアプリの宣伝

目的地が設定できる手帳のような使い心地のTODOアプリを公開しています。

Todo with Location

Yoshiko Ichikawa
Productivity
Free

スポンサードリンク

例えば、古いJSライブラリでLint絡みなどでmodule exportが出来ない場合とか。

理屈はわからんが、出来ないことはない。publicにhtmlがある前提で。

解決方法

HTMLファイル

public/html ファイル。通常通りscript srcで外部JSファイルを読み込む。

<!DOCTYPE html>
<html lang="en">
  <head>
    <script src="hoge.js"></script>
...

コンポーネントファイル

コンポーネント側で読み込んだhoge.jsを参照する。

ファイル内で<script></script>と記述すると何故か参照が通る。理由はわからん。

src/components/xxx.vue

<script></script>
<template>
  <p>...</p>
</template>
<script>
export default {
  data (){
    // hoge.jsにvar f1 = function(){ return "hoge" }が定義されていたとする
    return { msg: f1() }
  }
}
</script>

他の方法

試してないが、windowオブジェクトを通すと簡単にいけるらしい。

Vue.js(vue-cli)にて外部jsライブラリを読み込みたかった…(雑記) - なんも分からないのでしらべた

export default {
  data (){
    // hoge.jsにvar f1 = function(){ return "hoge" }が定義されていたとする
    return { msg: window.f1() }
  }
}

ちなみに

.vueファイル側で<script src="./hoge.js"></src>とした場合、当該ファイルからの相対パスで指定ファイルを探す。

で、hoge.jsの中にexport default {}として、Vueのライフサイクル処理を記述していないと正しく動作しない。

リンク