Nginx部署vue項目

特別提示：本人博客部分有參考網絡其他博客，但均是本人親手編寫過並驗證通過。如發現博客有錯誤，請及時提出以免誤導其他人，謝謝！歡迎轉載，但記得標明文章出處： http://www.cnblogs.com/mao2080/

1、問題描述

給前端同事部署了web項目之后，訪問發現除了index.html可以訪問，其他的路徑使用了“偽靜態”。比如訪問：http://localhost:8081/user/login，訪問即報404錯誤，這個實際上是請求HTML相關資源而非后台接口，后面網上查了相關資料找到了解決辦法。

2、配置文件

    upstream portalServer {
        server 192.168.1.1:8080;
    }
    
    server {
        listen       8081;
        server_name  localhost;

        root   /usr/local/application/nginx/web/build;
        
        location / {
            try_files $uri $uri/ @router;
            index  index.html;
        }
        
        location @router{
            rewrite ^.*$ /index.html last;
        }
        #代理后台接口
        location /api/ {
            proxy_pass http://portalServer/;
            proxy_set_header Host $host:$server_port;
        }

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

3、參考網站

https://my.oschina.net/u/1760791/blog/1575808

http://blog.sina.com.cn/s/blog_bd418dfa0102wser.html