一般情况下，前端项目部署在各自端口根目录下。但是如果服务器端口限制等因素，多个项目共享一个端口，就需要部署在二级目录下。

但是会面临几个问题

1. 服务器配置
2. 前端静态资源路径配置
3. 前端请求路径写法
4. 前端路由配置

服务器配置

参考nginx等网络服务器的配置方法，以nginx为例，其实主要是对location属性的配置，一下链接可以参考，需要注意的是二级目录下接口的反向代理，挺麻烦的

Nginx之location详解_寰宇001的博客-CSDN博客_location nginxrootlocation中root指定的只是相对路径，需要和路径结合起来映射地址，比如location ^~/static/ {## 这里的root需要和路径结合使用，即是映射的文件位置为 /usr/alyingboy/static root /usr/alyingboy/; index index.html}此时我们访问 IP/static/a.css ，那么就会找到 /usr/alyingboy/static/a.cssaliasalias指定的是绝对路径，不会和lochttps://blog.csdn.net/qq_40907977/article/details/106815216

Nginx之location详解_寰宇001的博客-CSDN博客_location nginxrootlocation中root指定的只是相对路径，需要和路径结合起来映射地址，比如location ^~/static/ {## 这里的root需要和路径结合使用，即是映射的文件位置为 /usr/alyingboy/static root /usr/alyingboy/; index index.html}此时我们访问 IP/static/a.css ，那么就会找到 /usr/alyingboy/static/a.cssaliasalias指定的是绝对路径，不会和lochttps://blog.csdn.net/qq_40907977/article/details/106815216

前端静态资源路径配置

        修改webpack打包的资源路径

          publicPath: '/xxx',  //直接把二级目录写上就行

前端请求路径写法

        尽量使用绝对路径，如/a/b/c，这里的写法，影响服务器配置反向代理的写法

前端路由配置

        配置路由的时候，vue-router增加配置项，base:'/xxx'，xxx为部署路径。同时mode尽量是hash，不然系统刷新可能会找不到页面，当然也可以不配置hash，使用history，但是就需要从服务器进行配置，我没有配置成功，配置成功后再更新吧。