typeacriptで静的なjsonデータをaxiosで読み込みたいが404エラーが出る

Question

前提

Nuxt.js typescriptで静的なjson データを読み込んでページで一旦全データを表示させたい

下記のsteps.ts ファイルで asyncを使用してjsonデータをaxios.getしたデータを返す関数 getJsonDataを記述
vueファイルにてjsonを取得する関数を実行する

実現したいこと

typescriptで取得したjsonデータをフロント側に表示する。後ほどNuxtLinkでpathにそのパラメータを代入して動的にURLを遷移させる

発生している問題・エラーメッセージ

Axios 404エラーが表示される

AxiosError {message: 'Request failed with status code 404', name: 'AxiosError', code: 'ERR_BAD_REQUEST', config: {…}, request: XMLHttpRequest, …}
code: "ERR_BAD_REQUEST"
config:
adapter: ƒ xhrAdapter(config)
data: undefined
env: {FormData: null}
headers: {Accept: 'application/json, text/plain, */*'}
maxBodyLength: -1
maxContentLength: -1
method: "get"
timeout: 0
transformRequest: [ƒ]
transformResponse: [ƒ]
transitional: {silentJSONParsing: true, forcedJSONParsing: true, clarifyTimeoutError: false}
url: "~/assets/json/step.json"
validateStatus: ƒ validateStatus(status)
xsrfCookieName: "XSRF-TOKEN"
xsrfHeaderName: "X-XSRF-TOKEN"
[[Prototype]]: Object
message: "Request failed with status code 404"
name: "AxiosError"
request: XMLHttpRequest {onreadystatechange: null, readyState: 4, timeout: 0, withCredentials: false, upload: XMLHttpRequestUpload, …}
response: {data: {…}, status: 404, statusText: 'Not Found', headers: {…}, config: {…}, …}
[[Prototype]]: Error

該当のソースコード

・jsonデータを読み込んで丸々返す typescriptファイル

import axios from 'axios';


export function setGuide() {
  async function getJsonData() {

    const { data } = await axios.get('~/assets/json/step.json')

    console.log({data})

    return {
      data
    }
  }

  return {
    getJsonData,
  };
}

・データを表示させたいvueファイル

<template>
  <div>
    {{ jsonData }}
  </div>
</template>
<script lang="ts">
  import { defineComponent } from '@nuxtjs/composition-api';
  import { setGuide } from '~/libs/setups/steps';
  import { wrapAsyncData } from '~~/src/libs/error-handling';

  export default defineComponent({
    asyncData: wrapAsyncData(async () => {
      const { getJsonData } = setGuide();

      return {
        jsonData: await getJsonData(),
      };
    }),
  });
</script>

試したこと

404エラーなのでtypescript内でのjsonファイルの読み込めていないのかなと思い、相対パスや@/ルートディレクトリにしてみたものの、同様のエラーが表示される

補足情報（FW/ツールのバージョンなど）

読み込みたいjsonファイルデータ(一部省略)

[
  {
    "id": 1,
    "title": "ご利用手順",
    "contents": [
      {
        "id": 2,
        "title": "はじめての方",
        "contents": [
          {
            "id": 3,
            "title": "yucacy の使い方",
            "contents": [
              {
                "id": 4,
                "title": "項目のタイトル",
                "contents": [
                  {
                    "id": 5,
                    "title": "説明のタイトル",
                    "body": "ご利用手順の内容が入ります。ご利用手順の内容が入ります。ご利用手順の内容が入ります。ご利用手順の内容が入ります。"
                  }
                ]
              }
                ]
              }
            ]
          }
    ]
  } 
  }
]

Answer 1

SSRなので自分のホストにアクセスする処理が冗長になるので、そのままjsonファイルを埋め込んで使用しました。
axios を使用せずに一旦jsonファイルをそのままインポート

import steps from '~/static/json/steps.json';

Answer 2

axiosはhttpクライアントです。

Promise based HTTP client for the browser and node.js

httpプロトコルで接続可能なURLにする必要があると思います。