history模式前端路由部署后访问/刷新页面404问题

Holly1945

已于 2022-04-29 13:34:11 修改

阅读量4.4k

点赞数 1

分类专栏： vue 文章标签：前端 vue.js webpack

于 2021-12-17 14:29:41 首次发布

本文链接：https://blog.youkuaiyun.com/Holly1945/article/details/121995472

版权

在使用HTML5 History API的前端路由时，刷新页面可能导致404错误。通过配置webpack的historyApiFallback选项，可以将所有404请求重定向到index.html。在Vue.js项目中，history模式的router需配置base属性，通常设为'/'。在webpack-dev-server中，可以使用`webpack serve --history-api-fallback`启用该配置。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

前端路由实际是路由与组件的映射表
访问任何路径，服务器只需要响应index.html （单页面应用）
浏览器根据不同路由匹配要渲染的内容

刷新操作时候：浏览器会带着地址栏路由请求服务器返回相应地静态资源
如果没有找到对应的资源返回 404

配置nginx:

location / {
   
    root /...
    # vue工程的路由是history模式
    try_files $uri $uri/ /index.html; // ** 重点加上这个配置
    index index.html index.html
}

前端 HTML5 History API

historyApiFallback

historyApiFallback 主要是用来解决HTML5 History

最低0.47元/天解锁文章

确定要放弃本次机会？

福利倒计时

: :

立减 ¥

普通VIP年卡可用

立即使用

Holly1945

关注关注

1
点赞
踩
5

收藏

觉得还不错? 一键收藏
0
评论
分享

复制链接

分享到 QQ

分享到新浪微博

扫一扫
举报

举报

专栏目录

vue部署后刷新白屏404？前端路由模式详解（hash和history）

hhhhhhhssss的博客

07-12

3997

前言不知道大家有没有遇到过一种情况，当自己的vue部署在服务器上时，一切都如想象办运转，然后脑袋duang的一下，突然想去刷新，然后网页就duang的一下，白屏了。不出意外的话，我猜你用的一定是history的路由模式。没错，这就是history中的一个问题，接下来让我们一起探索一下前端路由吧！一、pandas是什么？示例：pandas 是基于NumPy 的一种工具，该工具是为了解决数据分析任务而创建的。二、使用步骤 1.引入库代码如下（示例）： import numpy as np impo

vue3项目history路由模式部署上线405、刷新404问题(包括部分页面刷新404问题)

qq_52686989的博客

07-02

2098

上面这种配置在前端路由和后端接口前缀一致时，也会产生404问题（页面展示 not get/post），因为当你获取某个页面路由时比如/setting，由于Nginx里面配置了代理服务 location /setting，这会代理到到接口请求，当然就不能获取页面资源了。后端里面：每个路由模块都加一个统一的前缀，比如 ‘/api’；前端里面。

参与评论您还未登录，请先登录后发表或查看评论

Java入门到精通——调错篇之Spring2.5使用AOP时报错only available on JDK 1.5 and higher

空空行者

02-24

1万+

一、问题描述及原因。在Spring2.5Aop例子中的时候会出现一个错误only available on JDK 1.5 and higher，大概意思就是需要JDK1.5甚至更高版本。但是我用的是JDK1.8是比1.5高啊但是为什么报错呢？通过查阅资料此链接：http://fanli7.net/a/JAVAbiancheng/Spring/20140321/481981.

nginx部署前端项目时，正常访问前端页面成功后，浏览器刷新报404解决访问

热门推荐

小白变怪兽

07-03

1万+

1.在我们进行VUE开发的时候，如果采用默认的路由模式，就是类似于http://xxx.com/#/demo 因为多了一个#影响美观。 2.将路由的模式设置为mode: “history”; 也就是去除地址栏上的#号，类似于：http://xxx.com/demo 但是这样有个问题就是我们直接刷新页面的话，页面会报错，cannot get demo… 下面我们就来记录一下在开发环境下如果我们...

解决nginx配置vue.router项目在createWebHistory模式下访问404问题

对唔嗨住的博客

11-05

3276

问题描述项目中我vue.router配置路由模式为web模式，也就是createWebHistory创建的，访问的时候浏览路径不用带上 # 在本地开发的时候访问路径如：添加链接描述是可以正确打开的。但是打包项目放到服务器的时候却只能访问根路径，如：http://xxx.xxx.com/，如果想访问http://xxx.xxx.com/login页面会报提示找不到页面，只能通过路由去解决，一开始我以为是vue.router的问题，找了半天发现是nginx的配置不正确。解决方法在nginx配.

Vue下路由History模式打包后页面空白的解决方法

08-27

History 模式可以解决这些问题，但是新手往往会碰到 History 模式打包后页面空白的情况，这个问题是因为 Vue 官方没有正确地配置路由的 base 参数所导致的。解决方法是，在 vue-router 的配置中添加 base 参数，...

history模式 nginx配置_nginx部署前端项目,刷新时报404

weixin_36244678的博客

12-30

545

摘要：nginx部署前端项目,第一次打开时正常，刷新时报404的问题解决方式。nginx部署前端项目,第一次打开时正常，刷新时报404的问题解决方式。1.第一次打开时2.点击刷新或按 F5 后3.解决方案：修改nginx配置文件在配置文件中加上：try_files $uri $uri/ /index.html;location / { root html/front/...

前端路由访问404处理方法-前后端路由冲突？

好记性不如烂笔头

09-14

9187

问题描述当前端使用路由功能后，做的静态页没有任何问题。但和后端服务放到一块后，直接访问路由就会出错，导致404错误。问题原因导致这类问题的原因是，直接地址访问前端路由的地址会先请求服务器，可服务器又未对此路由进行处理，服务器没找到访问地址相关的路由就返回给前台404. 解决方法 koa2服务端 const Koa = require('koa'); const app = ne...

Nginx与history路由模式：刷新页面404问题

席木木的博客

02-08

6560

Nginx与history路由模式：刷新页面404问题，通过nginx服务端配置解决

Vue项目布署后，刷新页面404的真正原因找到了

Crazymryan的博客

10-19

4560

从一篇日记说起我是一个小前端，我有写日记的习惯2020年10月17天气晴今天天气不错，心情也跟着好起来了辛辛苦苦加班两个星期终于完成了产品需求，到了要上线的时候了，嘴里也不知不觉哼起...

完美解决vue在路由history模式下打包刷新报404（nginx）

a1983029606的博客

10-13

4145

history模式的配置方法我们来看看官方文档是教我们怎么配置的：HTML5 History 模式。首先要将mode设置为history： const router = new VueRouter({ mode: 'history', routes: [...] }) nginx location / { try_files $uri $uri/ /index.html; } 然后就没了... 这里我们需要清楚为什么会报404：我们用nginx部署项目，然后在地址栏..

生产环境上 vue-router路由history模式出现404问题

weixin_52950296的博客

02-27

924

生产环境上 vue-router路由history模式出现404问题

react及vue前端项目使用history路由部署nginx 404踩坑问题

cdy_1的博客

07-08

1033

这么一看是不是觉得没啥问题了，但是但是问题来了，结果虽然是跳转我项目的index.html了，但还是没匹配到我的路由，比如我跳转home页，他给我跳转我项目自己的404页了，出现了下面这个玩意儿。但是由于我的比较特殊，我是部署多个项目的也就是说文件结构是下面这种，像刚才那种配置的话就会跳转到根目录的index.html了，显然不是我想要的。我的配置就是这样，然后就好了，所有针对部署多个项目的情况应该这么配置，注意这个名字要和nginx里的那个文件夹名字一样。一种是哈希路由，其原理就是通过哈希值跳转。

前端浏览器刷新事件_面试官：你好，谈谈你对前端路由的理解

weixin_35259353的博客

01-20

255

介绍一篇文章，不可能做的面面俱到，全部受众。希望大家带着发散思维去看文章，将文章涉及的知识点，吸收为己所用。这样看完一篇文章，才能有所收获。好了不装了，今天我就化身性感面试官在线问大家一个问题，“谈谈你对前端路由的理解”。看到这个问题，那回答可多了去了。但是换位思考一下，你问候选人这个问题的时候，你想要得到什么答案？以我个人拙见，我希望候选人能从全局解读这个问题，大致以下三点。1、为什么会出现前端...

vueHistory 模式下，布置到服务器上路由刷新会报nginx404错误

qq_29069777的博客

10-08

198

之前写完vue项目后，布置到服务器，用nginx反向代理后，一开始进去，进各种路由都是没问题的，但是一旦f5刷新后就会出现一个nginx404的错误。经过翻阅vue文档后，发现这是vueHistor...

history 模式刷新 404 问题解决方法

记录每日学习的知识&技术

01-16

3748

这是因为 history 模式依赖于浏览器的 history.pushState API 来管理路由状态，而刷新页面时浏览器会向服务器发送请求，服务器无法正确地解析这些路由并返回对应的页面，从而导致 404 错误。如果你使用的是基于 Node.js 的服务器（如 Express），需要配置服务器以始终返回 index.html 页面，即使在不存在的路由上也是如此。在 Vue CLI 生成的项目中，Vue Router 的配置通常位于src/router/index.js文件中。

解决Vue项目history模式下打包部署到云服务器，访问路径，重复点击路由，刷新报404异常的问题！！！

m0_57249797的博客

10-22

1906

history模式下打包部署的访问路径以下步骤皆以Tomcat为例部署位置是Tomcat的webapps包下（可以自己配存放位置，这里不是重点）打包路径问题一，保证Vue的路由路径与我们部署在webapps包下的路径一致问题二，在项目目录下新建vue.config.js文件，增加配置： module.exports = { publicPath: './', assetsDir:'static', lintOnSave: true, productionSourceMap: fa

Vue路由history模式采坑：Nginx配置Vue项目刷新页面404

03-24

### Vue History Mode 下 Nginx 配置避免 404 的解决方案当使用 Vue Router 的 `history` 模式时，URL 不再带有 `#` 符号，这使得 URL 更加美观和语义化。然而，在这种模式下，如果用户直接访问某个路径或者刷新页面，服务器会尝试查找对应的文件并返回 404 错误，因为这些路径实际上是由前端路由处理的。为了避免这种情况发生，可以通过配置 Nginx 将未匹配到静态资源的请求重定向回应用入口文件（通常是 `index.html`）。以下是具体的配置方法： #### 修改 Nginx 配置在 Nginx 中，通过设置 `location` 块来捕获所有未找到对应文件的请求，并将其转发给 `index.html` 文件。以下是一个典型的配置示例[^2]： ```nginx server { listen 80; server_name your-domain.com; root /path/to/your/vue/app/dist; # 替换为实际部署项目的根目录 index index.html; location / { try_files $uri /index.html; # 如果找不到文件，则加载 index.html } error_page 404 /404.html; # 可选：自定义错误页 location ~* \.(?:ico|css|js|gif|jpe?g|png|woff2?)$ { # 处理静态资源缓存策略 expires max; add_header Cache-Control "public, must-revalidate"; } } ``` 上述配置的关键部分在于 `try_files $uri /index.html` 这一行。它告诉 Nginx 对于任何无法映射到具体文件或目录的 URI 请求都应返回 `index.html` 页面，从而让前端框架接管后续的路由逻辑。完成修改之后记得重启 Nginx 来使更改生效： ```bash sudo systemctl restart nginx ``` 另外需要注意的是，如果你的应用运行在一个子路径而非网站根路径上 (比如 http://example.com/myapp/) ，那么还需要调整 Vue 路由的基础路径以及相应地更新 Nginx 设置中的 `root` 和 `location` 参数[^3]。 #### 测试配置有效性为了验证新配置是否正常工作，可以执行如下操作： 1. 构建生产环境下的 Vue 应用 (`npm run build`)； 2. 把构建后的产物上传至指定的服务端位置； 3. 使用浏览器打开任意非首页链接地址进行测试——即使手动输入该网址也应该能够正确显示内容而不是遇到 404 错误。