vue--vue-routerのhistoryモードパッケージ後のページ空白の解決策

個人ブログへようこそ:http://www.xiaolongwu.cn
前言
穴を掘って記録し,後でめくるようにする
まず、ページの空白がリソースファイルのパスが正しくないことによるものではないことを確認する必要があります.リソースが見つからない場合は、絶対パスを相対パスに変更します.具体的な解決策は、webpack–リソースとcssの画像参照を相対パスにパッケージ化する方法です.
もんだいげんしょう
ローカル開発環境では何の問題もなく、ルーティングも正常に表示されていますが、サーバーにパッケージ化された後、ページにアクセスするのは空白で、コンソールを見ても間違いなく、その時は愚かな状態でした!!
よく考えてみると、historyモードではhtml 5のhistoryを操作するapiがいくつかあるので、urlに問題があるに違いありません.
問題を分析する
ローカル開発環境でアクセスしたアドレスは次のとおりです.

localhost:8888

以上は何の欠点もなく,すべて使いやすい.
しかし、私たちのプロジェクトはnginxのルートディレクトリに配置されず、ルートディレクトリの/aaa/ディレクトリの下に配置されています.
デフォルトのアクセス先は次のとおりです.

www.xxxx.com:9999/aaa/   

//   aaa    index.html  

//          localhost:8888

ここで問題が来ました.私たちが配置したルートにはaaaはありません.だから、私たちのルートはaaaを知らないのです.これが問題です.
問題を見つけて公式文書を見に行きました.本当に解決策が見つかりました.ここの公式文書を見てください.
解決策はルーティングにbaseの属性を付け、値は「/aaa」でよい
しんにゅう
ルーティングに直接アクセスする場合は、url+ルーティングアドレスをアドレスバーに直接入力します.たとえば、

www.xxxx.com:9999/aaa/login

しかし、私たちが車をノックした後、ページに大きな404が表示されました.
どうしてですか.
バックグラウンドサーバがリクエストをどのように処理するかを見てみましょう.サーバはデフォルトでaaaフォルダの下のloginファイルを探しに行き、見つからない場合はaaa/login/下のindex.htmlファイルを探しに行き、見つからない場合はフロント404ページに戻ります.
このようにブラウザのアドレスバーに直接ルーティングアドレスを入力すると、私たちのルーティング値は何の役にも立たず、404に戻るだけです.
解決策はバックグラウンドサーバでいくつかの操作を行い、公式ドキュメントにもこの部分の説明があります.
私たちのプロジェクトはルートディレクトリの下に配置されていないため、公式に与えられたソリューションとは少し異なり、nginxを使用しています.

location /aaa {
    root home/xxx/www   //         
    try_files $uri $uri/ /aaa/;     //    /aaa/      /aaa/index.html
}

$uriは変数で、あなたがアクセスしたアドレスを表します.
上の構成の意味は多分、aaa/フォルダの下のファイルにアクセスすると、見つからないときに/aaa/下のindex.htmlファイルに戻ります.
これで前の問題は解決した
個人ブログのアドレス:http://www.xiaolongwu.cn
githubリソースアドレス:https://github.com/vue -vue-routerのhistoryモードパッケージ後のページ空白のソリューション.md
私のCSDNブログアドレス:https://blog.csdn.net/wxl1555
私のブログの内容に疑問や疑問がある場合は、下のコメントエリアにメッセージを残したり、メールを送ったりして、一緒に勉強してください.
メールアドレス:[email protected]