Vue Router historyモードの配置方法とその原理

vue-routerはhashとhistoryのモードに分かれています。前者はそのデフォルトモードで、urlの表現形式はhttp://yoursite.com#homeで、見苦しいです。後者のurl表現はhttp://yoursite.com/homeで、比較的に美しいです。
しかし、historyモードを使用するには、バックエンドに追加の構成が必要です。ここでは、どのように構成され、なぜこのように構成されるのかについて議論する。
historyモードの配置方法
公式文書を見てみます。どのように配置するかを教えてくれます。HTML 5 Historyモードです。
まずmodeをhistoryに設定します。

const router = new VueRouter({
 mode: 'history',
 routes: [...]
})

バックエンドを設定します。

location / {
 try_files $uri $uri/ /index.html;
}

そして…ない！明らかに公式の教程の話は比較的簡単で、しかも私達はこの教程を参照して実際にやはりいくつか問題に出会います。
historyモードの配置実践と原理
この部分を読む前に、この部分の文書とこの部分の文書を見てください。
公式文書が教えてくれた以上、その通りに実践してみます。
先端のみの設定の場合
まず、modeをhistoryに設定しますが、バックエンドは設定されていません。その後、もし私達のルートがこのように長いならば：

const routes = [
  {path: '/home', component: Home},
  {path: '/', redirect: '/home'}
];

私たちはnginxでプロジェクトを展開して、アドレスバーにhttp://localhost:8080（ここで構成されたポートは8080）を入力します。アドレスバーを発見したらhttp://localhost:8080/homeになります。そしてすべて正常に見えます。ルートも正常に切り替わり、他の問題が発生しないように見えます。ウェブサイトで教えられたようにバックエンドもhistoryモードを実現できるように見えますが、直接にアドレスバーにhttp://localhost:8080/homeを入力すれば、404ページを獲得したことが分かります。http://localhost:8080はなぜ正常に表示されますか？道理は簡単です。http://localhost:8080にアクセスすると、静的サーバ（ここはnginx）はデフォルトでターゲットディレクトリに行きます。このファイルはリストの下にありますか？ありますその後、静的サーバはこのファイルに戻り、locationに合わせて転送します。もちろん、正常に表示されます。
しかし、rootに直接アクセスすると、静的サーバはターゲットディレクトリの下にindex.htmlファイルを探しに行きます。ターゲットディレクトリの下にこのファイルがありますか？ありませんだから自然に404です。
バックエンドの設定
直接アクセスvue-routerも成功できる目的を達成するために、バックエンド（ここではnginx）のいくつかの構成が必要です。
まず考えてみます。どうやってこの目的を達成できますか？
従来のhttp://localhost:8080/homeモード（home）では、構成が不要であっても、静的サーバは常にhttp://localhost:8080/homeを探して戻ってきます。hashは、http://localhost:8080#homeの後の文字をパラメータとして取得し、フロントエンドページを変換します。
類比してみても、index.htmlモードでは、私たちが欲しい状況は、vue-routerを入力しても、最終的には#を返して、historyをパラメータとして取得し、フロントエンドページを変換します。じゃ、inxの中で、誰がこのことができますか？答えはhttp://localhost:8080/homeです。
まずはtry_を見てみますfilesの文法：try_files file...uri;
そして公式文書を見て紹介します。

Checks the existence of files in the specified order and uses the first found file for request processing; the processing is performed in the current context. The path to a file is constructed from the file parameter according to the root and alias directives. It is possible to check directory's existence by specifying a slash at the end of a name, e.g. “$uri/”. If none of the files were found, an internal redirect to the uri specified in the last parameter is made.

index.htmlの後のパラメータに従って、vue-routerの中で対応するファイルまたはフォルダを順次マッチングします。一致がファイルである場合、このファイルに戻ります。一致するのがフォルダである場合、このフォルダにhomeコマンドで指定されたファイルを返します。最後のtry_filesパラメータは、前にマッチしていないfallbackとして使用されます。注意try_filesコマンドには少なくとも2つのパラメータが必要です。
自分のサイトを例に挙げます。

location / { 
    root      /data/www/rf-blog-web; 
    index      index.html; 
    try_files    $uri $uri/ /index.html; 
}

rootはinxの変数です。例えば私が訪問したURLはindexです。それではuriを表します。try_filesこのディレクトリには、サブディレクトリがありません。$uriと圧縮された名前の中には、hash値のjsファイルがあります。この住所をhttp://localhost:8080/homeに要求すると、まず/homeのファイルがあるかどうかを検索します。rf-blog-webのディレクトリがありますか？したがって、最終的には第3のパラメータを特定してindex.htmlに戻り、この規則に従って、すべてのルートのurlパスは最終的にhttp://localhost:8080/homeに位置します。homeは、パラメータを取得してフロントエンドページの変換を行い、これまでにhomeというアドレスを介してアクセスすることに成功しました。index.htmlというパラメータの役割は実はそれらにマッチしています。jsファイル用のもので、index.htmlはこの例ではあまり使われていません。実際には取り除かれます。vue-routerモードで発生する可能性のある問題および解決策
私のプロジェクトをhttp://localhost:8080/homeモードに変更する過程で、chunkローディングエラーが発生することがあります。chromeのnetworkを開いて、そのchunkローディング404が発見されました。要求されたurlの中には1つのパスが多くなっています。ここで解決策を見つけました。
LinusBorgは$uriモードでルートを切り替える時、私達は本当にページのurlパスを変えたので、webpackのruntimeは$uri/に位置すると思います。historyが設定された相対パスである場合、webpackがchunkをロードする際にはhistoryのような経路になるかもしれないが、chunkの真の経路はhistoryであるため、example.com/some/pathを絶対パス（publicPath）に設定してこの問題を解決する必要がある。
締め括りをつける
以上は小编が皆さんに绍介したVue Router historyモードの配置方法とその原理です。皆さんに何かお聞きしたいことがあれば、メッセージをください。小编はすぐにご返事します。ここでも私たちのサイトを応援してくれてありがとうございます。