Nginx如何正確配置部署在子目錄的vue項目

網站的目錄結構如下：

www/
├─ index.html
├─blog/
│ ├─dist/
│ ├─index.html

blog下是打包好的vue+vue-router項目。

此時nginx配置如下

    server {
         listen 443;
         server_name localhost;
         ssl on;
         root /var/ftp/www/;
         index index.html;
         #ssl配置省略
         location /api/ {
            proxy_pass https://localhost:3010;
         }
    } 

直接訪問https://域名/blog/，是沒問題的，可是當刷新的時候，blog的子頁面就會404，查閱后發(fā)現是因為vue-router開啟了history模式，于是按照官方文檔的方法在server里添加了

try_files $uri $uri/ /index.html;

這樣雖然不會404，但是頁面全部轉到了根目錄的index.html，于是調整了nginx的配置如下：

    server {
         listen 443;
         server_name localhost;
         ssl on;
         root /var/ftp/www/;
         index index.html;
         #ssl配置省略
         location /blog/ {
            root /var/ftp/www/blog/;
            index index.html;
         }
         location /api/ {
            proxy_pass https://localhost:3010;
         }
    } 

這時候訪問https://域名/blog/ 直接就報了404錯誤，然后試著修改nginx配置如下：

    server {
         listen 443;
         server_name localhost;
         ssl on;
         #ssl配置省略
         location /blog/ {
            root /var/ftp/www/blog/;
            index index.html;
         }
         location /api/ {
            proxy_pass https://localhost:3010;
         }
         location / {
            root /var/ftp/www/;
            index index.html;
         }
    } 

仍然會報404錯誤，請問是哪里搞錯了，折騰了一晚上頭發(fā)都快掉光了Q A Q