Vue-cliプロジェクトでローカルjsonファイルを取得する方法

今回は、Vue-cli プロジェクトがローカル json ファイルを取得する方法を説明します。 Vue-cli プロジェクトがローカル json ファイルを取得するための 注意事項 は何ですか? 以下は実際的なケースです。

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

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

しかし、このプロセス中、私のアクセスは常に 404 でした。確認したところ、vue-cli ベースで構築されたプロジェクトのうち、

static ディレクトリのみが vue-cli で公開されていることがわかりました static Data フォルダー、静的の下に置いた写真は、静的と同じレベルのディレクトリに新しいデータディレクトリを作成し、そのデータディレクトリにjsonファイルを置くと、リクエストは常に404になります。 file into 静的ディレクトリに入ると、通常どおりアクセスできます。

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

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

ローカル JSON ファイル データを取得する Vue-cli プロジェクトの上記の例は、エディターによって共有されるすべての内容です。参考にしていただければ幸いです。また、Script Home をサポートしていただければ幸いです。

この記事の事例を読んだ後は、この方法を習得したと思います。さらに興味深い情報については、php 中国語 Web サイトの他の関連記事に注目してください。

推奨読書:

vueリクエストデータの値を変更する方法

vue.jsの$setの配列を更新する方法

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