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

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

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

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.js で json を読み込む – Qiita

①:TypeScript導入時の注意点

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

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

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

tsconfig.json

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

はい、これでOK!

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

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

他の人が読んでいる記事

コメント (0)

コメントする人

セキュリティのためreCAPTCHAを利用しています。
Googleのプライバシーポリシー利用規約が適用されます。
うぇぶとまと|Webエンジニア
うぇぶとまと|Webエンジニア

飲食→派遣→IT系ベンチャーに転職。
本業をベーシックインカムとし、やりたい事に挑戦するWebエンジニア。