vueプライベートhistoryモードでサーバにパッケージ化されたホワイトスクリーンの原因と解決方法について

ルーティング内router/index.jsルーティング構成内のデフォルトモードはhashです.historyモードに変更すると、ローカルでは問題ありませんが、サーバにパッケージ化すると白い画面が表示されます.デフォルトのモードを使用してmode:historyを削除することができます.historyモードを使用する必要がある場合は、すべての状況を上書きする候補リソースをサービス側に追加する必要があります.つまり、historyを使用するには、サービス側がサーバに対応するモードを持っていなければなりません.サーバに構成されていない場合は(サーバの構成値nginx)、パッケージされた場所がサーバのルートディレクトリであるかどうかを確認します.例えばwww.xxx.comが指定したサービスアドレスは183.235.15.4/projectで、プロジェクトはproject/demoにパッケージ化されます.つまり、プロジェクトにアクセスするアドレスは183.235.15.4/project/demoです.この場合、routerでbase:/demo/を構成する必要があります.以下に示します.

const router = new VueRouter({
  mode: 'history',
  base: '/demo',
  routes: routers
});

 
vueルーティングにはhashとhistoryの2つのモードがあり、デフォルトはhashです.まず、この2つのモードの違いと実現を理解しなければなりません.
1、hashモード:urlは#,#以降の文字がhashまたはフロントエンドルーティングとなり、window.location.hashで入手できます.
      1.hashはurlに表示されますが、httpリクエストには含まれません.ブラウザの動作を指導するために使用され、サーバ側にはまったく役に立たないので、hashを変更してもページを再ロードしません.
      1.2.hash値の変化ごとにhashchangeがトリガーされる このイベントではhash値がどのように変化したかを知ることができます.その後、hashchangeをリスニングして、ページの一部のコンテンツを更新する操作を実現することができます.

function matchAndUpdate () {
   // todo    hash   dom     
}

window.addEventListener('hashchange', matchAndUpdate)

 
2、historyモード:historyモードのurlは#を持っていないので、美しく見えます.HistoryモードはHTML 5の新しい機能で、主にhistory.pushStateとhistory.replaceStateを使ってURLを変更します.HistoryモードでURLを変更してもページのリフレッシュは起こらず、ブラウザの履歴のみが更新されます.History interfaceは、ブラウザ履歴スタックが提供するインタフェースであり、back()、forward()、go()などの方法により、ブラウザ履歴スタックの情報を読み取り、様々なジャンプ操作を行うことができる.HTML5から、History interfaceは2つの新しい方法を提供します.pushState()、replaceState()は、ブラウザ履歴スタックを変更することができます.

window.history.pushState(stateObject,title,url)
window.history,replaceState(stateObject,title,url)

2つのモードの比較:
1.Hashモードは#の後の内容のみを変更することができ、HistoryモードはAPIで任意の同源URLを設定することができる2.HistoryモードはAPIで任意のタイプのデータを履歴に追加することができ、Hashモードはハッシュ値のみを変更することができ、つまり文字列3.Hashモードはバックエンド構成を必要とせず、互換性が良い.Historyモードは、ユーザーが手動でアドレスを入力したりページをリフレッシュしたりするときにURL要求を開始し、バックエンドがindex.htmlページを構成して静的リソースに一致しない場合に、
注意:historyモードでは、ページのパスはxxx.com/routerなので、サーバーがnginxのような転送をしていない場合は、デフォルトではxxx.com/routerの下のindex.htmlを探しています.vueプロジェクトは単一のページアプリケーションなので、パッケージ化後はhtmlが1つしかありません.パスは現在のプロジェクトのホームディレクトリの下で、他のディレクトリでは見つかりません.そのため、サーバはメインディレクトリの下のindexに強制的に転送し、vueプロジェクトはルートに基づいてそのブロックを表示する必要があります.