vue router react router使用History模式的nginx配置

vue-router 或者 react-router 路由模式有兩種，一種是使用hash來控制視圖的跳轉。另外一種是使用 history 模式，使用 history.pushState API 來控制視圖的跳轉。使用 hash 的缺點是路由的樣子會是 #/a/b 這種樣子，並且在微信分享時會出現問題。因此推薦使用history模式的路由。

使用history模式的服務端支持

因爲使用history時的路由是 www.xxx.com/a/b/c ，url 是指向真實 url 的資源路徑。所以回去服務端查詢該資源。每每資源是不存在的因而就會報404。下面以 ngixn 爲例修改 nginx 配置以支持history路由。

nginx 總體配置

原始配置

server {
    listen       80;
    server_name  localhost;

    #charset koi8-r;
    #access_log /var/log/nginx/log/host.access.log main;

    location ~ ^/api {
        proxy_pass http://xxx.com:3000;
    }
    location / {
        root /xxx/dist;
        index  index.html index.htm;
    }
複製代碼

修改後的配置

server {
    listen       80;
    server_name  localhost;

    #charset koi8-r;
    #access_log /var/log/nginx/log/host.access.log main;

    location ~ ^/api {
        proxy_pass http://xxx.com:3000;
    }
    location / {
        root /xxx/dist;
        index  index.html index.htm;
        try_files $uri $uri/ @rewrites;    
    }
    location @rewrites {
         rewrite ^(.+)$ /index.html last;
    }
複製代碼

配置詳解

由修改看出nginx這次修改，主要增長了

location / {
        try_files $uri $uri/ @rewrites;    
    }
複製代碼

try_files 是指當用戶請求url資源時 www.xxx.com/xxx，try_fil… 會到硬盤資源根目錄裏找 xxx。若是存在名爲 xxx 的文件就返回，若是找不到在找名爲 xxx 的目錄，再找不到就會執行@rewrites。（uri/指找目錄）

location @rewrites {
         rewrite ^(.+)$ /index.html last;
    }
複製代碼

rewrite是nginx中的重定向指令。^(.+)$ 是重定向規則。/index.html重定向路徑。