Vue プロジェクトが webpack でパッケージ化およびデプロイされている場合に Tomcat によって報告される 404 エラーに対処する方法

php中世界最好的语言
リリース: 2018-05-21 13:54:37
オリジナル
4359 人が閲覧しました

今回は、Vue プロジェクトの Webpack をパッケージ化してデプロイするときに Tomcat がリフレッシュする 404 エラーが発生する問題の対処方法を説明します。Vue プロジェクトの Webpack をパッケージ化してデプロイするときに注意する点は次のとおりです。実際のケースを見てみましょう。

問題が発生しましたwebpack を使用して vue をパッケージ化した後、パッケージ化されたファイルを Tomcat に公開します。アクセスは成功しますが、更新後にページが 404 エラーを報告します。

インターネットで検索したところ、この問題は HTML5 の履歴モードが原因であることが判明しました。その理由については、

https://

router.vuejs.org/zh- を参照してください。 cn/essentials/history -mode.htmlしかし、それを読んだ後、公式の解決策にはtomcatでそれを解決する方法が記載されていませんでした。

解決策公式の解決策の原則に従って

すべての状況をカバーするには候補リソースをサーバーに追加する必要があります: URLがどの

静的

リソースにも一致しない場合は、同じリソースが返される必要がありますindex.html ページ、このページはアプリが依存するページです。 つまり、Tomcat サーバーの下でこれを行うことができます。パッケージ化されたプロジェクトのルート ディレクトリに新しい WEB-INF フォルダーを作成し、WEB-INF 内に web.xml を記述します。

web.xml に次のように記述します:

<?xml version="1.0" encoding="UTF-8"?>
<web-app xmlns="http://xmlns.jcp.org/xml/ns/javaee" xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
  xsi:schemaLocation="http://xmlns.jcp.org/xml/ns/javaee
           http://xmlns.jcp.org/xml/ns/javaee/web-app_3_1.xsd"
  version="3.1" metadata-complete="true">
  <display-name>Router for Tomcat</display-name>
  <error-page>
    <error-code>404</error-code>
    <location>/index.html</location>
  </error-page>
</web-app>
ログイン後にコピー

目的は、404 が発生したときに、index.html ページに戻ることです。

最後に、ルートを設定し、すべてをカバーするルーティング状況を設定して、404 ページを与える必要があります。

const router = new VueRouter({
 mode: 'history',
 routes: [
  { 
    path: '*', 
    component: (resolve) => require(['./views/error404.vue'], resolve) 
  }
 ]
})
ログイン後にコピー

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

推奨読書:

phpを使用してカスタム長のランダムな文字列を生成する手順の詳細な説明


phpは、乱数、文字、または数字と文字の混合の文字列を生成します

以上がVue プロジェクトが webpack でパッケージ化およびデプロイされている場合に Tomcat によって報告される 404 エラーに対処する方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。

関連ラベル:
ソース:php.cn
このウェブサイトの声明
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。
人気のチュートリアル
詳細>
最新のダウンロード
詳細>
ウェブエフェクト
公式サイト
サイト素材
フロントエンドテンプレート
私たちについて 免責事項 Sitemap
PHP中国語ウェブサイト:福祉オンライン PHP トレーニング,PHP 学習者の迅速な成長を支援します!