Nginx如何正確配置部署在子目錄的vue項(xiàng)目

網(wǎng)站的目錄結(jié)構(gòu)如下：

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

blog下是打包好的vue+vue-router項(xiàng)目。

此時(shí)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/，是沒問題的，可是當(dāng)刷新的時(shí)候，blog的子頁(yè)面就會(huì)404，查閱后發(fā)現(xiàn)是因?yàn)関ue-router開啟了history模式，于是按照官方文檔的方法在server里添加了

try_files $uri $uri/ /index.html;

這樣雖然不會(huì)404，但是頁(yè)面全部轉(zhuǎn)到了根目錄的index.html，于是調(diào)整了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;
         }
    } 

這時(shí)候訪問https://域名/blog/ 直接就報(bào)了404錯(cuò)誤，然后試著修改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;
         }
    } 

仍然會(huì)報(bào)404錯(cuò)誤，請(qǐng)問是哪里搞錯(cuò)了，折騰了一晚上頭發(fā)都快掉光了Q A Q