前提：

vue專案：vue版本 2.6.10， 用vue-cli一鍵生成的vue專案，vue.config.js自動集成了的，為了專案的個別不同配置，另在專案根目錄下新建了vue.config.js。

以下我們假設 子目錄 是 /my-app/。

一、vue.config.js 檔案中作出相應改動：

1 // 專案部署基礎
2 // 預設情況下，我們假設你的應用將被部署在域的根目錄下,
3 // 例如：https://www.my-app.com/
4 // 預設：'/'
5 // 如果您的應用程式部署在子路徑中，則需要在這指定子路徑
6 // 例如：https://www.xxxx.com/my-app/
7 // 需要將它改為'/my-app/'
 

8 
9 const BASE_URL = process.env.NODE_ENV === 'production' ? '/my-app/' : '/';

二、路由處做修改，新增base。

1 const router = new Router({
2   mode: 'history',
3   base: 'my-app',
4   routes: routes
5 });

至此，vue專案的修改就OK了，dev環境下執行專案，就可以看到 路由中已經添加了/my-app/字首。localhost:8080/my-app/home。

三、nginx 配置： server { listen

        server_name  localhost;

        #charset koi8-r;

        #access_log  logs/host.access.log  main;
        root        E:\x\xx\xxx-web\dist; #vue專案的打包後的dist

　　　　 # 配置一級目錄專案
        location / {

            try_files $uri $uri/ @router;#需要指向下面的@router否則會出現vue的路由在nginx中刷新出現404
            index  index.html index.htm;
        }
        #對應上面的@router，主要原因是路由的路徑資源並不是一個真實的路徑，所以無法找到具體的檔案
        #因此需要rewrite到index.html中，然後交給路由在處理請求資源
　　　　　　
 
　　　　　　
　　　　　　# 配置二級目錄/my-app/
        location /my-app/ {
            alias E:\x\xx\xxx-web\dist; #vue專案的打包後的dist

 　　　　　　index index.html index.htm; 
　　　　　　try_files $uri $uri/ index.html; 
　　　　} 
　　　　location @router { 
　　　　　　rewrite ^.*$ /index.html last; 
　　　　} 
}

配置好之後，重啟nginx即可。