Vue 3使用二級目錄部署(Nginx)

最近通過Vue3寫了個Web展示項目，部署的時候不希望再弄個新域名或者二級域名，想到的使用二級目錄。
最初按照正常的Vue發布來部署，Nginx配置如下

  location ^~/web{
    alias /data/web;
    try_files $uri $uri/ /web/index.html;
    index index.html;
  }

通過"域名/web"訪問，返回500。
后來再網上查詢，大部分說需要

1. 配置vue.config.js中的publicPath
2. 配置route中的mode和base；
   通過嘗試，發現Vue3中，RouterOptions設置mode已經更新為createWebHistory，base已經變為createWebHistory的參數；
   最終成功方案：
3. Nginx 配置不變
4. Vue項目中vue.config.js 配置如下：

module.exports = {
  publicPath: process.env.NODE_ENV === 'production' ? '/web/' : '/'
}

3. Vue項目中route關鍵配置如下：

   createRouter({
    history: createWebHistory('/web/'),
    routes: [ ***路由列表***]
  })

通過域名+/web 訪問，可以正常顯示。以上親測有效，如有其他問題歡迎在評論去交流。