摘要：
需求有的时候，你的域名很珍贵，除了二级域名外。你还可以将你的项目部署在服务器二级目录下，这样的话，就可以部署多个项目了。
需求
有的时候，你的域名很珍贵，除了二级域名外。
你还可以将你的项目部署在服务器二级目录下，这样的话，就可以部署多个项目了。
比如说，我有一个域名为dshvv.com的服务器，我想部署两个项目：
12306项目：http://dshvv.com/12306
淘宝项目：http://dshvv.com/taobao
问题
普通项目不会有问题，
但是如果是单页项目，而且单页项目的路由用的是history模式，不管是vue还是react都会出现一个问题
那就是“刷新当前页面404”
这是因为这种（history）模式会被错误的认为向服务端发出了真请求，但是其实这这是前端路由变化，后端自然也没做好相应你的处理，所以就404了
解决
前端配置
vue.config.js增加如下配置：
publicPath: '/caspage/'
路由配置如下：
const router = newVueRouter({ mode: 'history', base:'/caspage/', routes })
后端nginx.conf配置如下：
# 首先给要部署的项目分配一个服务
server { listen 8001; location /{ # vue h5 history mode 时配置 try_files $uri $uri/ /index.html; root html/caspage; index index.html index.htm; } }
# 再到配置域名的主配置server上做反向代理
server { listen 80; server_name localhost; location /{ root html; index index.html index.htm; # vue-router的history模式下，刷新页面404处理 try_files $uri $uri/ /index.html; } error_page 500 502 503 504 /50x.html; location = /50x.html { root html; }
#这里是需要部署的二级目录应用配置
location/cloudChartPage{
alias/data/cloudChartPage/;
indexindex.htmlindex.htm;
try_files$uri$uri//cloudChartPage/index.html;
}
}然后重新启动就行了
参考：https://www.cnblogs.com/liugx/p/9336176.html
nginx安装与配置
参考本文
如果二级页面刷新依然白屏
这样处理
location /xxpage { alias /data/html/pagedir/; index index.html; try_files $uri $uri/@xxpage_action; } location @xxpage_action { rewrite ^.*$ /pagedir/index.html last; }