質問する

私のViteVue 3プロジェクトには2つのパスがあります.

/

/mypage

このプロジェクトを構築したら、http-serverでlocalhost:8080サーバを開きます.

// 서버 실행방법
// 참고) dist에 build된 파일이 들어있다.
$ npx http-server dist

まず,内部router.push('/mypage')のような関数により,ページ切り替え動作が良好である.また,アドレスウィンドウがhttp://localhost:8080,パスが'/'のところもよく近づくことができる.
でも.
アドレスウィンドウにhttp://localhost:8080/mypageと入力し、アクセスできない現象(Failed to load resource: the server responded with a status of 404 ())が発生します.この問題を解決したい.🧐

探索する

googlingとともに以下のように検討する.

まず、vueはスパです.したがって、ページリクエスト時にindexを使用するentryポイント(index.html)があります.html、js、およびcssを実行して、要求されたページを描画します.

childpath ('localhost:8080/mypage')が要求された場合、index.htmlはロードされず、他のhtmlを探しているため、404 NOT FOUNDが発生すると推定される.

この問題が正しい場合は、他のhtmlファイルを追加するのが正常です.

// 기존 파일구조
dist
ㄴ index.html

// 임시로 변경한 파일구조
dist
ㄴ index.html
ㄴ mypage
	ㄴindex.html

ファイルを作成してサーバ(一時的に変更されたファイル構造など)を実行し、mypageのindexであるchildpath ('localhost:8080/mypage')にアクセスします.htmlのロードを確認します.つまり、childpath ('localhost:8080/mypage')のリクエストは厳しい場所に向かっています.
問題点を把握した.では、今しなければならないのは모든 요청을 index.html 로 보내기です.
でもなぜルーターなのか.プッシュで移動するとスムーズですか?
router.pushはindexhtml内部で操作する関数.したがって、サーバに新しいリクエストを発行するのではなく、関数を実行してルーティングパスを変更します.
->あなたの回答はまずいと思いますが、何か良い説明があれば教えてください.🥺

解決する

Proxyを使用してlocalhost:8080に発行されたすべてのリクエストはdist/indexです.htmlを出せばいい!つまり、vueのコードを変更するのではなく、サーバ設定を変更する必要があります.
次の図に示すように、http-serverを実行すると、localhost:8080にすべてのサーバが送信されます.次のようにサーバーを動かして、動きがいいです.😊

npx http-server --proxy http://localhost:8080?

Viteを使用して他のサーバを使用している場合は、このドキュメントを参照してください.

おしゃべり

この現象を理解するために、グーグルは以下のキーワードを使用しています.

vue build router not working

vue build Failed to load resource: the server responded with a status of 404 ()

vue http-server index.html

私のように検索する人のために、タイトルは私が検索したように取りました.😉

私の解決策でなければ、ルータが履歴モードであるかどうかを見てみましょう.

リファレンス

https://forum.vuejs.org/t/vue-router-does-not-work-in-production-build/76848

https://stackoverflow.com/questions/69143139/how-do-i-configure-http-server-for-history-mode-in-vue-js-2