最近、vue+webpack によるパッケージング パスに問題があることを発見しました。

ここで、vue+webpack のパッケージング パスの問題を解決するための記事を共有します。この記事は参考になるので、皆さんのお役に立てれば幸いです。

最近小さな vue プロジェクトを書きました。別の Web プロジェクトとして公開したくなかったので、リソース プロジェクトのパブリック フォルダーに置くつもりでした。いくつかの小さな問題が発生したのでまとめます。彼らはここにいる。

リソースパスは次のとおりです:

パブリックディレクトリに設定されているアクセスパスは「/」です。この場合、アクセスパスは「ドメイン名/vue-demo」になります。プログラムにアクセスすると、エラーは報告されませんでしたが、ページは空白でした。これまでこの方法でリリースされたプロジェクトには問題はありませんでしたが、今回はどうなったのでしょうか?

慎重に調査した結果、vue-router が原因であることがわかりました。プロジェクトのニーズにより、スクロール動作が使用されます。スクロール動作では履歴モードをオンにする必要があります。

履歴を使用する場合は、vue-router の公式ドキュメントに次の文があります。モードでは、URL は http://yoursite.com/user/id などの通常の URL と同様で、見栄えも良くなります。

ただし、このモードをうまくプレイするには、バックグラウンド構成のサポートも必要です。私たちのアプリケーションはシングルページのクライアントアプリケーションであるため、バックグラウンドが正しく設定されていない場合、ユーザーがブラウザで http://oursite.com/user/id に直接アクセスすると、404 が返され、見た目が良くありません。 。

したがって、すべての状況をカバーする候補リソースをサーバー側に追加する必要があります。URL が静的リソースに一致しない場合は、アプリが依存するページである同じindex.html ページを返す必要があります。

vue-router によって監視されているパスは依然として「/」と「/component」であり、自然なパスは一致しません。

そのため、ルートを変更し、各パス、つまり「/vue-demo」にプロジェクト名を追加する必要があります。同時に、リソース ファイルが正しくロードされることを確認するために、パッケージ化中に publicPath も必要になります。 「/vue-demo」を追加します。

完成！ ！

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

関連記事:

JavaScript を介して WeChat ランダム切り替えコードを実装する方法 (詳細なチュートリアル)

ES6 を使用して WeakMap を通じてメモリ リーク問題を解決する (詳細なチュートリアル)

vue+element- を使用するui+ これらの ajax テクノロジーはフォームの例を実装できます

以上が最近、vue+webpack によるパッケージング パスに問題があることを発見しました。の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。