【Vue.js】JSONファイルを読み込む方法＋注意点１つ

Vue.jsでjsonファイルを読み込む方法について解説しています、動的なデータをjsonファイルで管理する際に便利な方法です。TypeScript導入時の注意点についても触れてありますので参考にどうぞ。

目次[ click ]

Vue-cliを使っている場合

assetsフォルダにjsonファイルを設置して、それをcomponentsフォルダ内のコンポーネントから読み込む際は下記のようにします。

assets/data.json

[
  {
    "id": 1,
    "area": "hokkaido"
  },
  {
    "id": 2,
    "area": "aomori"
  }
]

main.vue

import PrefData from '@/assets/data.json'

export default {
  data: () => {
     prefData: PrefData
  }
}

Vue-CliにTypeScriptを導入している場合、先ほど紹介した通りに実装を進めると下記のようなエラーが出る事があります。

Module '@/assets/data.json' was resolved to 'hoge/src/assets/data.json', but '--resolveJsonModule' is not used.

この場合は、プロジェクト下に置いてある「tsconfig.json」のcompilerOptionsにresolveJsonModuleを追加すればエラーは解消されます。

tsconfig.json

{
  "compilerOptions": {
    "resolveJsonModule": true,
・・・後略

はい、これでOK！

うぇぶとまと / Webエンジニア

Vue-Cliならjsonファイルを読み込むのも超簡単ですね、TypeScript導入時も設定ファイルに一行追加するだけで対応できますし。CDN版のVueだとaxios経由で読み込む必要があるので多少手間はかかっちゃいますね(￣▽￣;)

他の人が読んでいる記事