web-dev-qa-db-ja.com

vuejs：axios getrequestのローカルjsonファイルの正しいパス

私のVueプロジェクトでは、次のステップの開発のためにいくつかのデータをモックアップしました。テストデータはすでにjsonファイルに保存しています。そして、私のvueプロジェクトは、Vue-Cliで作成された典型的なプロジェクトであり、私のプロジェクトの構造は次のようになります。

_My_project
    build
    config
    data
        service_general_info.json
    node_modules
    src
        components
            component-A
                component-A.vue
_

ご覧のとおり、すべてのフォルダーは元々vue-cliによって作成されています。そして、新しいフォルダーdataを作成し、その中にテストデータのjsonファイルを配置します。

そして、次のように_component-A_のコンポーネント内のイベント処理関数のaxiosライブラリによってデータを読み込みたいと思います。

_  methods: {
    addData() {
      console.log('add json data...');
      axios.get('./../../data/service_general_info.json');
    },
  },
_

相対パスを使用してターゲットファイルを見つけましたが、404エラーが返されました。では、パスを正しく設定する方法は？現在、ローカルホストでdevモードを実行しています。

エラーメッセージは次のとおりです。GET http://localhost:8080/data/service_general_info.json 404 (Not Found)

jsonvue.jsaxios
5
Chris Bao

Vue-cliプロジェクトでは、axiosはカスタムフォルダーからデータを取得できません。

テストjsonファイルを保存するには、staticフォルダーを使用する必要があります。

したがって、axios呼び出しを次のように変更する必要があります。

axios.get('/static/service_general_info.json');

これはjsonからデータを取得します。

3
Jin Lin

テストのためだけに実行している場合は、パブリックフォルダーに保存して、httpルートから直接アクセスできます。

例えばパブリックフォルダーにresults.jsonファイルがあり、 http：// localhost：8080/results.json を使用してアクセスできます。

2
Shankar Gurav

私にとっては、静的フォルダーを使用しても機能しませんでした。 publicフォルダに入れなければなりませんでした。

Jsonフォルダーを公開して、以下のようにアクセスしました。

getCountries() {
    return axios.get('json/country-by-abbreviation.json', { baseURL: window.location.Origin })
        .then((response) => { return response.data; })
        .catch((error) => {
            throw error.response.data;
        });
}
0
Ankur Akvaliya

サーバーからhttp呼び出しが行われると、axiosはユーザーが接続していることを認識しません http：// localhost：808 、完全なURLを指定する必要があります。

このような：

methods: {
    addData() {
      console.log('add json data...');
      axios.get('http://localhost:8080/data/service_general_info.json');
    },
  },
0
haykou