ローカルの JSON ファイルデータを取得する Vue-cli プロジェクトの例

以下に、Vue-cli プロジェクトがローカルの json ファイル データを取得する方法の例を紹介します。これは参考になるものであり、皆さんの役に立つことを願っています。

私が作成した vue デモ プロジェクトでは、json データをローカルに追加し、それを json ファイルに書き込み、非同期リクエストを通じて取得して、データをロードしたいと考えています。

axios.get('http://localhost:8080/datas/json')

しかし、このプロセス中、私のアクセスは常に404でした。確認したところ、vue-cliで構築されたプロジェクトでは、静的ディレクトリのみがvue-cliで公開された静的データフォルダーであることがわかりました。 static 配下では正常にアクセスできます。static と同じレベルのディレクトリに新しい datas ディレクトリを作成し、その中に json ファイルを置きます。リクエストは常に 404 です。json ファイルを static ディレクトリに置くと、普通にアクセスできますよ。

この機能を必ず覚えておいてください:

静的ディレクトリは、vue-cli によって公開される静的フォルダーです。すべての静的データは静的ディレクトリに配置する必要があります。 ！

上記は私があなたのためにまとめたものです。

関連記事:

vue2.0の擬似アンカーポイントのインスタンス

vueのmixins属性の詳細説明

vue2.0のルーティング切り替え後にページのスクロール位置が変わらないバグの解決方法

以上がローカルの JSON ファイルデータを取得する Vue-cli プロジェクトの例の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。