Vue History模式刷新404白屏问题解决方案（Gin框架适配）

于 2025-03-15 14:56:35 发布
阅读量521 收藏 4
点赞数 13
文章标签： gin vscode 前端 后端 go vue
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.youkuaiyun.com/SuHongMu/article/details/146279195
版权

前几天在网站上新增了/predict路由，写好后发现每次刷新都会出现404白屏的情况

查找了资料后，发现是由于后端没有正确配置路由重定向导致。

原理：
Vue-router的history模式通过window.historyAPI实现URL跳转，不会触发页面刷新。如果直接访问这些路由时，服务端会尝试寻找对应的物理文件，从而导致404错误。

解决办法：

在route.go中正确配置路由文件，完善静态文件服务配置

和通配路由 (关键！)

问题即可解决

如果使用nginx上部署vue项目，采用history模式，可以看看这位大佬的文章

在nginx上部署vue项目(history模式)；_nginx vue history-优快云博客

SuHongMu
关注
vue history模式刷新页面进入404解决方案
郝峰vip的博客
12-02 9745
vue 路由模式 history模式 刷新页面进入404解决方案
vue3项目history路由模式部署上线405、刷新404问题(包括部分页面刷新404问题)
最新发布
qq_52686989的博客
07-02 2045
上面这种配置在前端路由和后端接口前缀一致时，也会产生404问题（页面展示 not get/post），因为当你获取某个页面路由时比如/setting，由于Nginx里面配置了代理服务 location /setting， 这会代理到到接口请求，当然就不能获取页面资源了。后端里面：每个路由模块都加一个统一的前缀，比如 ‘/api’；前端里面。
vue-cli + router生成的项目，当mode为history时，直接在url中输入地址页面访问404，或者刷新页面后404
c2311156c的博客
08-30 6109
有的时候，业务中会有一些需求，直接在其他地方，比如邮件中提供系统链接，通过点击一个url直接跳转到我们的系统中来。 在本地开发时，直接输入对应的url就可以访问，但是当项目部署在服务器之后，直接输入url就会报错404，这是因为router本身提供的就是一个 虚拟路径，通过router内部的机制进行页面跳转和参数传递的，实际项目中根本不存在此路径对应的资源。 对应此问题，尤大在官网上也提到过，...
vue下history模式刷新后404错误解决方法
10-18
主要介绍了vue下history模式刷新后404错误解决方法，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
Vue 设置history模式下强制刷新页面报错404的问题
weixin_57095786的博客
04-23 3027
Vue 设置history模式下强制刷新页面报错404的问题
vue路由history模式刷新404问题解决方案
qq_40663497的博客
10-28 2569
vue单页因微信分享和自动登录需要，对于URL中存在’#’的地址，处理起来比较坑。用history模式就不会存在这样的问题。但是换成history模式，就会有个新的问题，就是页面刷新后，页面就无法显示了（404）。对于这个问题，我们只需要在服务器配置如果URL匹配不到任何静态资源，就跳转到默认的index.html。 我这里是针对nginx的配置，总结如下： 方案一 （这种方式容易被第三方劫持） location /{ root /data/nginx/html; ind
Vue项目History模式404问题解决
大老杨的博客
10-30 9840
本文主要解决Vue项目使用History模式发布到服务器Nginx上刷新页面404问题。（由于每个项目的情况都不尽相同，本方案已经完美解决本在所使用项目，具体情况可能还需要修改。） 1.项目背景分析 本人是Java后台开发，Vue其实使用也没有多久，只能说简单了解。发现问题的时候其实也一头雾水，第一思想就是百度看别人的思路。 1.1 查看项目打包后文件 首先看看项目打包后文件内容，看看有没有什...
vue路由用history刷新会404
sinye的博客
06-20 503
vue项目的路由使用history模式，然后刷新页面，居然报404。然而百度都是说改成hash，然而又不想路由出现“#”。有的说修改nginx，好家伙，我本地起的vue项目，哪来的nginx。
在使用vue router把模式改成history时，刷新404问题解决方案
Allen-Ye博客
04-03 3149
如果我们在这边模式是用history，部署到ng上面就第一次页面不会出现问题，刷新页面就会出现404，有以下解决方案 方案一 （这种方式容易被第三方劫持） location /{ root /data/nginx/html; index index.html index.htm; error_page 404 /index.html; } ...
解决vue router使用 history 模式刷新后404问题
12-09
因为我们的应用是单页客户端应用，当使用 history 模式时，URL 就像正常的 url，可以直接访问http://www.xxx.com/user/id，但是因为vue-router设置的路径不是真实存在的路径，所以刷新就会返回404错误。 想要history模式正常访问，还需要后台配置支持。要在服务端增加一个覆盖所有情况的候选资源：如果 URL 匹配不到任何静态资源，则应该返回同一个 index.html 页面，这个页面就是你 app 依赖的页面。 也就是在服务端修改404错误页面的配置路径，让其指向到index.html。 警告： 因为这么做以后，你的服务器就不再返回 404 错误页面
vue部署后刷新白屏404？前端路由模式详解（hash和history）
hhhhhhhssss的博客
07-12 3979
前言 不知道大家有没有遇到过一种情况，当自己的vue部署在服务器上时，一切都如想象办运转，然后脑袋duang的一下，突然想去刷新，然后网页就duang的一下，白屏了。 不出意外的话，我猜你用的一定是history的路由模式。 没错，这就是history中的一个问题，接下来让我们一起探索一下前端路由吧！ 一、pandas是什么？ 示例：pandas 是基于NumPy 的一种工具，该工具是为了解决数据分析任务而创建的。 二、使用步骤 1.引入库 代码如下（示例）： import numpy as np impo
Nginx：vue路由使用history模式刷新404
z69183787的专栏
11-08 3070
在history模式下，只是动态的通过js操作window.history来改变浏览器地址栏里的路径，并没有发起http请求，但是当我们直接在浏览器输入这个地址的时候，就会对服务器发起http请求，但是这个目标在服务器上又不存在，所以会返回404。只有最后一个参数可以引起一个内部重定向，之前的参数只设置内部的 URL 的指向。当vue-router使用history模式时，当我们刷新页面或直接访问路径的时候就会返回404，如图。使用 Nginx try_files。例子：根据上面的配置，当请求。
vue项目history模式刷新404问题
FGGIT的博客
02-01 6908
vue项目history模式刷新404问题
vue history 模式 刷新404 问题
前端的路上
03-25 4789
1. src和href的区别 src： 表示对资源的引用，它指向的内容会嵌入到当前标签所在的位置。当浏览器解析到该元素时，会暂停其他资源的下载和处理，直到将该资源加载、编译、执⾏完毕，所以⼀般js脚本会放在页面底部。 href： 表示超文本引用，它指向一些网络资源，建立和当前元素或本文档的链接关系。当浏览器识别到它他指向的⽂件时，就会并⾏下载资源，不会停⽌对当前⽂档的处理。 常用在a、link等标签上。 2. 对HTML语义化的理解 语义化是指根据内容的结构化，选择合适的标签。 语义化的优点如下：
在 history 模式下，为什么刷新页面会出现404?
小草莓的博客
10-25 4638
同时需要注意在使用 History 模式时，需要保证所有路由的访问路径都指向 index.html，否则仍然会出现404错误。这些配置将确保在 Vue 应用程序中使用 history 模式时，服务器能够正确地处理所有路由请求，并返回正确的页面。这段代码会将所有请求都指向根目录下的 index.html 文件，让前端路由来处理 URL 请求。具体的配置方式取决于对应项目使用的服务器环境，常见的有 Apache、Nginx 等。以将所有请求都代理到 Vue 应用程序的入口文件。
06. vue history模式刷新后页面白屏、401、404的问题
qq_29517595的博客
06-21 7077
vue项目history模式刷新后页面空白的问题
解决vue中history导致的刷新404问题
brillianceGlory的博客
03-09 415
解决vue中history导致的刷新404问题
Vue2.0界面不刷新时的解决方案和数据更新技巧
在Vue.js开发中，框架的主要特性之一就是其响应式系统，通常情况下，当数据发生变化时，视图应该自动更新来反映这些变化。但在实际开发过程中，有时候数据确实更新了，界面却没有刷新，这种现象通常是由于Vue的响应...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值