vue+webpack パッケージ化パスにはどのような問題がありますか?

今回は、vue+webpack パッケージング パスの問題点と、山西省の vue+webpack パッケージング パスの 注意事項 について説明します。以下は実際的なケースです。一見。

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

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

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

慎重に調査した結果、vue-router が原因であることがわかりました。プロジェクトのニーズにより、スクロール

動作 が使用されます。スクロール動作では、履歴モードをオンにする必要があります。 vue-router の公式ドキュメントには、次の文があります。 、URL は通常の URL と同様です。たとえば、http://yoursite.com/user/id も適切です。 ただし、このモードをうまくプレイするには、バックグラウンド構成のサポートも必要です。私たちのアプリケーションはシングルページのクライアントアプリケーションであるため、バックグラウンドが正しく設定されていない場合、ユーザーがブラウザで http://oursite.com/user/id に直接アクセスすると、404 が返され、見た目が良くありません。 。

そのため、すべての状況をカバーする候補リソースをサーバー側に追加する必要があります。URL がどの

static

リソースにも一致しない場合は、アプリが依存するページである同じindex.html ページを返す必要があります。 。

vue-router によって監視されているパスは依然として「/」と「/component」であり、自然なパスは一致しません。 そのため、ルートを変更し、各パス、つまり「/vue-demo」にプロジェクト名を追加する必要があります。同時に、リソース ファイルが正しくロードされることを確認するために、パッケージ化中に publicPath も必要になります。 「/vue-demo」を追加します。

完成！ ！

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

推奨読書:

vueパッケージ化後のフォントと画像リソースの失敗に対処する方法

webpackフォントアイコンが表示できない問題を解決する方法

以上がvue+webpack パッケージ化パスにはどのような問題がありますか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。