当前位置：网站首页 > 技术资源 > 正文

有遇到部署服务器后刷新404问题吗?

off999 2025-04-05 21:15 9 浏览 0 评论

这是一个经典的问题，相信很多同学都有遇到过，那么你知道其真正的原因吗？

我们先还原一下场景：

vue项目在本地时运行正常，但部署到服务器中，刷新页面，出现了404错误

先定位一下，HTTP 404 错误意味着链接指向的资源不存在

问题在于为什么不存在？且为什么只有history模式下会出现这个问题？

为什么history模式下有问题

Vue是属于单页应用（single-page application）

而SPA是一种网络应用程序或网站的模型，所有用户交互是通过动态重写当前页面，前面我们也看到了，不管我们应用有多少页面，构建物都只会产出一个index.html

现在，我们回头来看一下我们的nginx配置

server {
  listen  80;
  server_name  www.xxx.com;

  location / {
    index  /data/dist/index.html;
  }
}

可以根据 nginx 配置得出，当我们在地址栏输入 www.xxx.com 时，这时会打开我们 dist 目录下的 index.html 文件，然后我们在跳转路由进入到 www.xxx.com/login

关键在这里，当我们在 website.com/login 页执行刷新操作，nginx location 是没有相关配置的，所以就会出现 404 的情况

为什么hash模式下没有问题

router hash 模式我们都知道是用符号#表示的，如 website.com/#/login, hash 的值为 #/login

它的特点在于：hash 虽然出现在 URL 中，但不会被包括在 HTTP 请求中，对服务端完全没有影响，因此改变 hash 不会重新加载页面

hash 模式下，仅 hash 符号之前的内容会被包含在请求中，如 website.com/#/login 只有 website.com 会被包含在请求中，因此对于服务端来说，即使没有配置location，也不会返回404错误

解决方案

看到这里我相信大部分同学都能想到怎么解决问题了，

产生问题的本质是因为我们的路由是通过JS来执行视图切换的，

当我们进入到子路由时刷新页面，web容器没有相对应的页面此时会出现404

所以我们只需要配置将任意页面都重定向到 index.html，把路由交由前端处理

对nginx配置文件.conf修改，添加try_files $uri $uri/ /index.html;

server {
  listen  80;
  server_name  www.xxx.com;

  location / {
    index  /data/dist/index.html;
    try_files $uri $uri/ /index.html;
  }
}

修改完配置文件后记得配置的更新

nginx -s reload

这么做以后，你的服务器就不再返回 404 错误页面，因为对于所有路径都会返回 index.html 文件

为了避免这种情况，你应该在 Vue 应用里面覆盖所有的路由情况，然后在给出一个 404 页面

const router = new VueRouter({
  mode: 'history',
  routes: [
    { path: '*', component: NotFoundComponent }
  ]
})

配置Nginx 404

上一篇：React应用部署常见问题:刷新页面出现404错误的解决方案
下一篇：VUE项目打包发到Docker二次刷新页面报404错误问题解决

有遇到部署服务器后刷新404问题吗?

为什么history模式下有问题

为什么hash模式下没有问题

解决方案

相关推荐

取消回复欢迎你发表评论:

python 3.8调用dll - Could not find module 错误的解决方法

加密Python源码方案 PyArmor（python项目源码加密）

Python3.8如何安装Numpy（python3.6安装numpy）

大学生机械制图搜题软件?7个受欢迎的搜题分享了

编写一个自动生成双色球号码的 Python 小脚本

免费男女身高在线计算器，身高计算公式

将python文件打包成exe程序，复制到每台电脑都可以运行

Python学习入门教程，字符串函数扩充详解

腿身比计算公式，在线计算器，长短腿类型表

Python数据分析实战-使用replace方法模糊匹配替换某列的值

有遇到部署服务器后刷新404问题吗?

为什么history模式下有问题

为什么hash模式下没有问题

解决方案

相关推荐

取消回复欢迎 你 发表评论:

python 3.8调用dll - Could not find module 错误的解决方法

加密Python源码方案 PyArmor（python项目源码加密）

Python3.8如何安装Numpy（python3.6安装numpy）

大学生机械制图搜题软件?7个受欢迎的搜题分享了

编写一个自动生成双色球号码的 Python 小脚本

免费男女身高在线计算器，身高计算公式

将python文件打包成exe程序，复制到每台电脑都可以运行

Python学习入门教程，字符串函数扩充详解

腿身比计算公式，在线计算器，长短腿类型表

Python数据分析实战-使用replace方法模糊匹配替换某列的值

取消回复欢迎你发表评论: