vueルーティングhistoryモードリフレッシュ404問題解決策
2289 ワード
vue単ページは,微信共有と自動登録の必要性から,URLに'#'が存在するアドレスに対して,比較ピットを処理する.historyモードではこのような問題は存在しません.しかしhistoryモードに変更すると、ページがリフレッシュされてページが表示されなくなるという新しい問題がある(404).この問題では、URLが静的リソースに一致しない場合、デフォルトのindexにジャンプするようにサーバで構成する必要があります.html. ここではnginxの構成について、以下にまとめます.
シナリオ1(この方式は第三者にハイジャックされやすい)
シナリオ2
シナリオ3(vue.js公式チュートリアルで述べたhttps://router.vuejs.org/zh-cn/essentials/history-mode.html)
シナリオ1(この方式は第三者にハイジャックされやすい)
location /{
root /data/nginx/html;
index index.html index.htm;
error_page 404 /index.html;
}
シナリオ2
location /{
root /data/nginx/html;
index index.html index.htm;
if (!-e $request_filename) {
rewrite ^/(.*) /index.html last;
break;
}
}
シナリオ3(vue.js公式チュートリアルで述べたhttps://router.vuejs.org/zh-cn/essentials/history-mode.html)
server {
listen 8888;# 80,
server_name localhost;
root E:/vue/my_project/dist;#vue dist
location / {
try_files $uri $uri/ @router;# @router vue nginx 404
index index.html index.htm;
}
# @router, ,
# rewrite index.html ,
location @router {
rewrite ^.*$ /index.html last;
}
#.......
}