路由和Nginx

history路由前端router實現

history路由刷新頁面流程

一個新的請求發起後 --> 後端路由 -> 後端路由規則返回內容 --> 瀏覽器加載頁面內容 --> 前端路由處理渲染 -> 按前端路由規則修改頁面內容 --> 結束

Nginx配置參考

    server {
        listen       80;
        server_name  <your-server-name>;
    # http 轉成 https，配置了ssl證書時啓用
    return 301 https://$host$request_uri;

    # 解決history路由刷新問題
    location / {
        # index.html文件在服務器中的存儲目錄
        root /data/www;  # /data/www需要修改爲你服務器中的目錄
        index index.html index.htm;
        
        #資源訪問失敗後定向到index.html
        try_files $uri $uri/ /index.html;
    }

    error_page 404 /404.html;
    location = /404.html {
    }

    error_page 500 502 503 504 /50x.html;
    location = /50x.html {
    }
}

# SSL證書配置
server {
    listen       443 ssl;
    server_name  &lt;your-server-name&gt;;

    ssl_certificate &lt;your_ssl_certificate_filepath&gt;;
    ssl_certificate_key &lt;your_ssl_certificate_key_filepath&gt;;
    ssl_session_cache shared:SSL:1m;
    ssl_session_timeout  5m;
    ssl_ciphers ECDHE-RSA-AES128-GCM-SHA256:HIGH:!aNULL:!MD5:!RC4:!DHE;
    ssl_prefer_server_ciphers on;

    # 解決http轉https後路由報錯問題
    location / {
        root /data/www;
        index index.html index.htm;
        try_files $uri $uri/ /index.html;
    }

    error_page 404 /404.html;
    location = /404.html {
    }

    error_page 500 502 503 504 /50x.html;
    location = /50x.html {
    }
}