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 访问，可以正常显示。以上亲测有效，如有其他问题欢迎在评论去交流。