vueCLIで外部JSファイルを読み込む方法

Question

やりたいこと

vueCLIを使用した際にコンポーネント内で、外部JSファイル定義した関数や変数を読み込みたいです。

ディレクトリ構成

vueApp/
    ├─src/
    |   ├─components/
    |   ├─static/
    |   |   └─js/
    |   |       └─common.js
    |   |
    |   ├─App.vue
    |   └─main.js
    |
    └─vue.config.js

現状のソースコード

// App.vue
<template>
    <button @click='test'>test</button>
</template>

<script>
export default {
    data: () => {

    },
    methods: {
        test () {
            // common.js内のメソッドを読み込み
            commonTest()
        }
    }
}

// common.js
function commonTest() {
    console.log('commonOK')
}

試したこと

以下の内容を試してみました。

main.js内でcommon.jsの読み込み

以下のように、importもしくは、requireで読み込んでみたのですが、commonTest()はundefinedになってしまいました。

// main.js
import common from '@/static/js/common'     // importのパターン
require('@/static/js/common')               // requireのパターン

new Vue ({
    common,
    render: h => h(App)
}).$mount('#app')

コンポーネント内で直接読み込み

以下のように、コンポーネント内で直接importしてみたのですが、結果は同じでした。

// App.vue(※一部省略)
<script>
    import common from '@/static/js/common'
    export default {
        deta: () => {

        },
        methods: {
            commonTest()
        }
    }
</script>

以上、拙い文章で恐縮ですがどなたかご教授頂けると幸いです。

Comments

[yureighost]

念のため確認ですが、ディレクトリ構成の「static」と思われるところが
「statc」になっているのは単にスペルミスですかね。

[stakizawa]

yureighost様
申し訳ございません。
ディレクトリ構成のstatcは単純なスペルミスです。
質問内容の修正を致します。

Answer 1

export defaultでモジュールとして出力すれば利用できると思います。

// common.js
function commonTest() {
  console.log('commonOK');
}

export default { commonTest };

・・・
<script>
  import common from '@/static/js/common';

  export default {
    data: () => {

    },
    methods: {
      test() {
        // common.js内のメソッドを読み込み
        common.commonTest();
      },
    },
  };
</script>

Comments

[stakizawa]

yureighost様
回答頂きありがとうございます。

一点質問なのですが、その方法でやるとすると、例えばcommon.js内のメソッドが複数ある場合は、どのように記述するべきなのでしょうか？
以下のように、
export defalut { commonTest, commonTest2 }のような形になるのでしょうか？

もしくは、class内でメソッドを定義してexport defalut{ class名 }の方がよいのでしょうか？

[yureighost]

その辺りは結局設計次第ですが、
対象の関数が余りにも多いならクラスとして取り込んだ方がよさそうですね。

[stakizawa]

かしこまりました。
丁寧なご回答ありがとうございます。
もしよろしければ、あと一点お聞きしたいのですが、グローバル変数を持ちたいときなどはどのようにするのが良いのでしょうか？

複数のコンポーネントでグローバルの変数を参照したいと考えています。
もし上記のようにclassで対応するといった場合は、classのプロパティで持つのも手なのかなとも思ったのですが、なんだか違うような気もしていて、ベターなやり方を模索しております。