vueルーティングhistoryモードリフレッシュ404問題解決策

2289 ワード

vue単ページは,微信共有と自動登録の必要性から,URLに'#'が存在するアドレスに対して,比較ピットを処理する.historyモードではこのような問題は存在しません.しかしhistoryモードに変更すると、ページがリフレッシュされてページが表示されなくなるという新しい問題がある(404).この問題では、URLが静的リソースに一致しない場合、デフォルトのindexにジャンプするようにサーバで構成する必要があります.html. ここではnginxの構成について、以下にまとめます.
シナリオ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;
        }
        #.......      
  }