vue部署到域名二级目录刷新404的解决

目录 vue部署到域名二级目录刷新404 vue如何部署二级目录 说一下这里会遇到得问题 如何解决

vue部署到域名二级目录刷新404

一个域名有个根目录，但有两个项目，就需要二级目录

比如说，我有一个域名为csdn测试数据的服务器，我想部署两个项目：

12306项目：http://csdn测试数据/12306 淘宝项目：http://csdn测试数据/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测试数据的服务器，我想部署两个项目：

京东项目：http://sslcsq测试数据/jingdong 淘宝项目：http://sslcsq测试数据/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测试数据/taobao 或者 http://sslcsq测试数据/京东 看你的二级目录配置的什么了 

以上为个人经验，希望能给大家一个参考，也希望大家多多支持。

查看更多关于vue部署到域名二级目录刷新404的解决的详细内容...