Vue路由history模式解決404問題的幾種方法

　　　　location / {
 root D:\Test\exprice\dist;
 index index.html index.htm;
 try_files $uri $uri/ /index.html;
 add_header 'Access-Control-Allow-Origin' '*';
 add_header 'Access-Control-Allow-Credentials' 'true';
 add_header 'Access-Control-Allow-Methods' 'GET, POST, OPTIONS';
 add_header 'Access-Control-Allow-Headers' 'DNT,X-CustomHeader,Keep-Alive,User-Agent,X-Requested-With,If-Modified-Since,Cache-Control,Content-Type';
 }
 
 location ^~/api/ {
 proxy_pass http://39.105.109.245:8080/;
 }

location / {
　　root D:\Test\exprice\dist;
　　index index.html index.htm;
　　try_files $uri $uri/ /index.html;

location /{
　　root /data/nginx/html;
　　index index.html index.htm;
　　error_page 404 /index.html;
}

 server {
 listen 8888;#默認端口是80，如果端口沒被占用可以不用修改
 server_name localhost;
 root E:/vue/my_project/dist;#vue項目的打包后的dist
 location / {
 try_files $uri $uri/ @router;#需要指向下面的@router否則會出現(xiàn)vue的路由在nginx中刷新出現(xiàn)404
 index index.html index.htm;
 }
 #對應(yīng)上面的@router，主要原因是路由的路徑資源并不是一個真實的路徑，所以無法找到具體的文件
 #因此需要rewrite到index.html中，然后交給路由在處理請求資源
 location @router {
 rewrite ^.*$ /index.html last;
 }
 #.......其他部分省略
 }