vue history 404

最新推荐文章于 2025-05-15 11:04:34 发布
原创 最新推荐文章于 2025-05-15 11:04:34 发布 · 434 阅读 · 1 ·
CC 4.0 BY-SA版权
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。

本文介绍了一种解决在设置mode为'history'时，页面刷新出现空白的问题。通过调整服务器配置，具体步骤包括找到项目路径，修改nginx.conf文件中的root和try_files指令，并重新加载nginx配置。

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

当设置了 mode: ‘history’ 第一个页面是出来的，但是重新刷新就是空白页面
解决办法：
在服务器找到当前项目路径
执行 pwd 然后复制路径A

打开nginx.cof的文件，在这里插入图片描述

代码事例

		root /webproject/myblog3/admin;
		index index.html index.htm; 
		try_files $uri $uri/ /index.html;

重新执行以下nginx.conf的文件

./nginx -s reload
vue的history模式返回404
爱coding的大尾巴的专栏
05-14 577
让找不到路径的url重定向到单页应用index.html中。这样也可以解决在支付宝内置浏览器直接拦截404的问题。
vue history模式刷新页面进入404解决方案
郝峰vip的博客
12-02 9797
vue 路由模式 history模式 刷新页面进入404解决方案
Vue项目History模式404问题解决方法
12-01
本文主要解决Vue项目使用History模式发布到服务器Nginx上刷新页面404问题。（由于每个项目的情况都不尽相同，本方案已经完美解决本在所使用项目，具体情况可能还需要修改。） 1.项目背景分析 本人是Java后台开发，Vue其实使用也没有多久，只能说简单了解。发现问题的时候其实也一头雾水，第一思想就是百度看别人的思路。 1.1 查看项目打包后文件 首先看看项目打包后文件内容，看看有没有什么能突破的地方。文件目录如下： 打眼一看可以发现，主要的可能就是这个index.html文件，内容如下： <!DOCTYPE html> <html lang="en"> <head> <meta
Vue项目History模式404问题解决
大老杨的博客
10-30 9862
本文主要解决Vue项目使用History模式发布到服务器Nginx上刷新页面404问题。（由于每个项目的情况都不尽相同，本方案已经完美解决本在所使用项目，具体情况可能还需要修改。） 1.项目背景分析 本人是Java后台开发，Vue其实使用也没有多久，只能说简单了解。发现问题的时候其实也一头雾水，第一思想就是百度看别人的思路。 1.1 查看项目打包后文件 首先看看项目打包后文件内容，看看有没有什...
Vue项目 history模式下 刷新出现404问题
最新发布
lichengwei816的博客
05-15 400
2，修改nginx配置。
vue history路由模式404问题解决
weixin_49722066的博客
04-08 1177
vue使用history路由模式打包到线上，F5刷新会重定向到404。如果使用宝塔部署，添加这行代码可以解决。直接修改ngxin配置即可。
vue在history模式中，刷新界面出现404错误方法合集（apache，nginx，iis）
搬砖小胖纸的搬砖记录
07-16 556
在vue cli3或者cli2中，网页链接中会出现“#”，有点影响url的美观度，去掉“#”的方法如下。 export default new Router({ mode:"history", //将模式修改成history就可以了 routes: [{ path: '/', name: 'Index', component: Index }] }) 但修改为history模式后，线上项目刷新会出现404错误，如下图 解决方法如下：
Vue路由history模式解决404问题的几种方法
12-10
vue-router 默认是hash模式，使用url的hash来模拟一个完整的url，当url改变的时候，页面不会重新加载。但是如果我们不想hash这种以#号结尾的路径时候的话，我们可以使用路由的history的模式。比如如下网址：使用hash...
vue-cli history模式实现tomcat部署报404的解决方式
10-16
在Tomcat中部署Vue CLI构建的项目并采用`history`模式时，遇到404错误的主要原因是服务器没有正确地配置来处理这些动态路由。为了解决这个问题，我们需要按照以下步骤进行配置： 1. **打包Vue CLI项目**： 使用`...
VUE的history模式下除了index外其他路由404报错解决办法
12-10
我们先来看下代码： location / { ... root /dist; ... } try_files首先会判断他是文件，还是一个目录，...vue-router 默认是hash模式，使用url的hash来模拟一个完整的url，当url改变的时候，页面不会重新加载。但是如果我
vue history 模式 404
wangqiuwei07的专栏
04-20 153
需要配置Nginx try_files $uri $uri/ /index.html;
解决Vue的history模式刷新页面出现404的问题
道阻且长，行则将至。
11-24 2231
解决Vue的history模式刷新页面出现404的问题 路由的两种工作模式 （一）、hash模式 地址中永远带着#号，不美观 若以后将地址通过第三方手机app分享，若app校验严格，地址会被标记为不合法 兼容性较好 （二）、history模式 地址干净，美观 兼容性和hash模式相比略差 应用部署上线时需要后端人员支持，解决页面服务器端刷新404的问题 一刷新就报错404 解决办法 应用部署上线时需要后端人员支持，解决页面服务器端刷新404的问题 Usage npm install --save
vue中路由history模式下的404问题
ybb_ymm的专栏
01-03 866
v对于URL中存在’#’的地址，处理起来比较坑。用history模式就不会存在这样的问题。但是换成history模式，刷新页面报404。对于这个问题，我这里不废话，直接针对nginx的配置贴出： listen 80; server_name 10.1.71.188; charset utf-8; location /{ try_files $uri $...
vue路由history模式刷新页面出现404问题
weixin_45426383的博客
07-26 1970
vue hash模式下，URL中存在’#’，用’history’模式就能解决这个问题。但是history模式会出现刷新页面后，页面出现404。解决的办法是用nginx配置一下。 在nginx的配置文件中修改 方法一： location /{ root /data/nginx/html; index index.html index.htm; if (!-e $request_filename...
Vue 设置history模式下强制刷新页面报错404的问题
weixin_57095786的博客
04-23 3074
Vue 设置history模式下强制刷新页面报错404的问题
vue-router history 404 问题
Drizzlejj的博客
01-13 615
默认 hash 模式 —— 使用 URL 的 hash 来模拟一个完整的 URL，于是当 URL 改变时，页面不会重新加载。但是会有一个 # 号。 http://localhost:8080/#/films/hotplaying 就没有 # 号了。 不过这种模式要玩好，还需要后台配置支持。因为我们的应用是个单页客户端应用，如果后台没有正确的配置，当用户在浏览器直接访问就会返回 404，这就不好看了。 所以呢，你要在服务端增加一个覆盖所有情况的候选资源：如果 URL 匹配不到任何静态资源，
在 history 模式下，为什么刷新页面会出现404?
小草莓的博客
10-25 4792
同时需要注意在使用 History 模式时，需要保证所有路由的访问路径都指向 index.html，否则仍然会出现404错误。这些配置将确保在 Vue 应用程序中使用 history 模式时，服务器能够正确地处理所有路由请求，并返回正确的页面。这段代码会将所有请求都指向根目录下的 index.html 文件，让前端路由来处理 URL 请求。具体的配置方式取决于对应项目使用的服务器环境，常见的有 Apache、Nginx 等。以将所有请求都代理到 Vue 应用程序的入口文件。
vue+nginx history模式404解决方案
hylqqcsd的专栏
06-20 2445
server { listen 80; server_name xxx.com; access_log /usr/local/src/admin/log/access.log; error_log /usr/local/src/admin/log/error.log; location / { root /usr/local/src/admin; try_files $u...
vue router history 404
03-25
### Vue Router History Mode 下的 404 错误解决方案 在使用 Vue Router 的 `history` 模式时，URL 将不再带有 `#/` 前缀，而是采用更简洁的路径形式。然而，在此模式下，如果服务器未正确配置，则可能会遇到 404 ...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值