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

今回は、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 サイトの他の関連記事を参照してください。