Nuxt.jsとaxiosで内部jsonからデーターを出力したい出力されない。

Question

繰り返しデータをjsonにまとめaxiosで読み込み、v-forで出力しようと思い下記のように書いてみました。

参考URL
https://www.kipure.com/article/138/

<template>
  <ul>
    <li v-for="v-for="res in results"">
      ID={{ res.id }}<br>name={{ res.name }}<br>check={{ res.check }}
    </li>
  </ul>
	
</template>


<script>
import axios from "axios";

export default {
  data () {
    return {
      results:[]
    }
  },
  mounted() {
    axios.get("@/assets/json/menu.json")
    .then(response => {
      this.results = response.data
      console.log(response.data)
    })
  },
  computed: {
    processedPosts() {
      let posts = this.results;
    }
  }
}
</script>

File構成は下記の部分にjsonファイルを格納

assets
 - json
  - menu.json

そうすると下記のようなエラーが２つ出ました。
xhr.js?b50d:178 GET http://localhost:3000/@/assets/json/menu.json 404 (Not Found)

createError.js?2d83:16 Uncaught (in promise) Error: Request failed with status code 404
at createError (createError.js?2d83:16)
at settle (settle.js?467f:17)
at XMLHttpRequest.handleLoad (xhr.js?b50d:61)

これによる疑問ですが
①なぜ内部フォルダにあるjsonが読み込めないのでしょうか？
②下のエラーを調べてみるとaxios関係のエラーのようでした。
ひょっとして内部jsonファイルは別のaxiosを使わずとも別の使い方があるのでしょうか？

Answer 1

対応方法は二通りあります。

一つ目は、質問者様の言葉をお借りするなら「内部リソース」として、ビルド時に json を取り込んでしまう方法で、以下のようにすることで json データにアクセスできます。

<script>
import results from '@/assets/json/menu.json'

export default {
  data() {
    return {
      results
    }
  },
  // 略
}
</script>

ビルド時点でリソースを取り込む場合は、(Nuxt.js のデフォルト設定ではおそらく)上述のように '@' をプロジェクトのルートとして解釈する機能が有効になりますので、json データを取り込めます。

二つ目は、実行時にデータを取得する方法で、以下のように '@' を利用せず、素直に絶対パスで指定するか、ページのパスからの正しい相対パスを記載することで適切に動作します。

<script>
import axios from 'axios'

export default {
  mounted() {
    // 以下の絶対パスは、このサイトが設置されるサーバー上の
    // パスを加味して適切に修正する必要があります。
    // 以下の例はサイトがサーバーのルートに設置される場合に
    // 適切に動作します
    axios.get('/assets/json/menu.json')
      .then(/* 略 */)
  }
}