vue部署到域名二级目录刷新404的解决
作者：DefineJ
这篇文章主要介绍了vue部署到域名二级目录刷新404的解决，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教
vue部署到域名二级目录刷新404
一个域名有个根目录，但有两个项目，就需要二级目录
比如说，我有一个域名为csdn.com的服务器，我想部署两个项目：
- 12306项目：http://csdn.com/12306
- 淘宝项目：http://csdn.com/taobao
如果是单页项目，而且单页项目的路由用的是history模式，不管是vue还是react都会“刷新当前页面404”
这是因为这种（history）模式会被错误的认为向服务端发出了真请求，但是其实这这是前端路由变化，后端自然也没做好相应你的处理，所以就404了
前端配置：
vue.config.js增加如下配置：
publicPath: '/caspage/'
路由配置：
const router = new VueRouter({
mode: 'history',
base:'/caspage/',
routes
})
nginx配置：
# 这里是需要部署的二级目录应用配置
location /cloudChartPage {
alias /data/cloudChartPage/;
index index.html index.htm;
try_files $uri $uri/ /cloudChartPage/index.html;
}
然后重新启动就行了
🔚
vue如何部署二级目录
有的时候，我们的域名很珍贵，除了二级域名外。
我们不仅可以把项目部署到当前域名下 也可以部署到二级目录下，这样的话，就可以部署多个项目了。
比如说，我有一个域名为sslcsq.com的服务器，我想部署两个项目：
- 京东项目：http://sslcsq.com/jingdong
- 淘宝项目：http://sslcsq.com/taobao
说一下这里会遇到得问题
普通项目不会有问题，
但是如果是单页项目(比如vue写的单页面)，而且单页项目的路由用的是history模式，不管是vue还是react都会出现一个问题
那就是“刷新当前页面404”
这是因为这种（history）模式会被错误的认为向服务端发出了真请求，但是其实这这是前端路由变化，后端自然也没做好相应你的处理，所以就404了
如何解决
前端配置（前端看这就行了，后面找后台配置）
在vue.config.js中增加如下配置：
publicPath: '/taobao/' 这里就是配置的二级目录
路由配置如下：
const router = new VueRouter({
mode: 'history',
base:'/taobao/', 这里就是配置的二级目录
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/;
index index.html index.htm;
try_files $uri $uri/ /cloudChartPage/index.html;
}
}新启动然后访问就可以http://sslcsq.com/taobao 或者 http://sslcsq.com/京东 看你的二级目录配置的什么了
以上为个人经验，希望能给大家一个参考，也希望大家多多支持脚本之家。