VUE単一ページのマイクロチャネルの共有や自動URLアドレスで「#」のために必要なサインインのため、より多くのピットを処理し、存在しています。この問題は、履歴モードでは存在しないでしょう。しかし、履歴モードに、新たな問題があるだろう、それはページが更新した後、ページが(404)を表示することができない、です。この問題については、我々は唯一のURLは任意の静的リソースに一致する場合に、デフォルトのindex.htmlにジャンプし、サーバを設定する必要があります。
私がここに持っているように要約nginxのための設定は、次のされています
(この方法でハイジャックされる可能性が高い第三者)オプション1を
1つの場所/ { 2 ルート/データ/ nginxの/ HTML。 3 インデックスのindex.htmlのindex.htm。 4 error_page 404 / index.htmlを。 5 }
オプションII
。1つの LOCATION / { 2 ルート/ XXX / distの; 3。 インデックスのindex.html index.htmを、 4。 IF - (!{$ REQUEST_FILENAME E) 5。 リライト^ / /(*。)Index.htmlと最終; // /index.htmlがスペースの前に 6。 BREAK ; 7 } 。8 }
オプション3 vue.js公式チュートリアルが言及したhttps://router.vuejs.org/zh-cn/essentials/history-mode.html
1台の サーバー{ 2 8888聞く、使用されていないポートを変更できない場合は#80がデフォルトのポートである 3。 サーバー名localhostは、 4 ルート/ XXX / DIST; DISTパケット#vue項目 5 LOCATION / { 6 try_files $ $ URI URI / @router; nginxの404現れるVUE更新され#@routerそうでなければ、以下の経路を指すために必要 7。 インデックスのindex.htmlのindex.htmを、 8 } 9。 リソースに主として上記@routerに対応#、パスルーティングとではない真のパス、私は特定のファイルを見つけることができません 10 #をそのためのindex.htmlを書き換えるために、その後、要求ルーティングリソースを処理する必要がある 11 LOCATIONの@router { 12 ^書き換えを。* $ /最後のindex.html、 フロントスペース行う/index.html 13 } 14 位.......他の部分は省略する 15 }
詳細な構成:
try_filesは、ユーザーがURLリソースの要求したときにことを意味
www.xxx.com/xxxを
、try_filesリソースがXXXを見つけるために、ハードディスクのルートディレクトリに移動します。その後、xxxは、探しているという名前のディレクトリに見つからない場合は、xxxのリターンを命名し、ファイルの存在が@routerを実行するための意志を見つけることができない場合。($ウリは、$ URI /ディレクトリには、指を見つけ、ファイルを見つけるために参照します)
nginxの書き換えリダイレクト命令です。^。* $リダイレクトルール。/index.htmlがリダイレクトパス。