vue项目发布后第一次打开正常刷新页面报404解决方法

最新推荐文章于 2025-07-04 15:40:59 发布
转载 最新推荐文章于 2025-07-04 15:40:59 发布 · 2.9k 阅读 · 1 ·
CC 4.0 BY-SA版权
原文链接：https://router.vuejs.org/zh/guide/essentials/history-mode.html#%E5%90%8E%E7%AB%AF%E9%85%8D%E7%BD%AE%E4%BE%8B%E5%AD%90

本文详细介绍了Vue Router中历史模式的使用方法，包括如何在后端进行相应的配置，以实现更友好的URL结构，提高用户体验。

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

解决Nginx部署Vue项目第一次访问正常第二次访问404的问题
江晓龙的博客
08-29 4万+
【代码】解决Nginx部署Vue项目第一次访问正常第二次访问404的问题。
vue2/3 - 解决使用vue-pdf插件分页预览，第一次打开正常显示，第二次打开后空白什么也不显示怎么办？解决vue项目利用vue-pdf显示预览时首次打开没问题，但二次打开就会出现不加载或报错！
高级前端工程师
07-30 2840
vue2，vue3，vue-pdf，报错，第二次打开空白，第一次打开没事，vue-pdf使用+分页预览+第一查看正常，第二次查看空白解决方案，pdf预览空白问题解决。第一次预览正常，再重新打开就空白的问题。无法预览，或者预览出现空白页，h5 vue-pdf,pdf预览,以及第二次打开空白，Cannot read properties of undefined (reading 'catch')，vue-pdf 第一次进入可以,第二次为空白，pdf预览空白问题解决。第一次预览正常,再重新打开就空白的问题，CM
已解决阿里云服务器上使用nginx部署vue项目，第一次正常访问，点击刷新的时候报404【图文】
小王博客基地
12-21 3319
一、前言 我们在阿里云服务器中搭建自己写的web项目时，前端vue一般都需要nginx进行反向代理一下。今天小编也是买了个服务器，准备搭建一下，经过千辛万苦页面出来了，F5刷新了一下直接报错，最后看了好多博客解决了此问题，网上太多描述不清了，今天来个图文展示，一步到胃！！ 二、报错展示 三、解决办法 小编是通过宝塔傻瓜式安装配置的，所以都是可视化的，linux命令就不演示了。 第一步： 第二步： try_files $uri $uri/ /index.html; 四、总结 这样我们在刷新页面就不会报
VUE部署后刷新页面显示404
最新发布
qq_37368055的博客
07-04 312
当我们设置mode为history时，前端发送路径的服务器时，服务器端不认识省略#的url，所以返回404。2、hash模式解决了通过http请求来切换页面，改变路径，可以直接改变页面，无需进行网络请求，这叫前端路由，在hash模式下改变的是#中的信息，项目编写完就开始在服务器部署了，不知道小伙伴有没有遇到过，从首页通过导航点击进入子页面，没有问题，但是进入后刷新页面就会报错404。该模式下，发送请求只会截止到/#前，所以对于服务器端来说，即使没有配置location，也不会返回404。
前端页面点开正常，刷新后报404
没啥简介
02-11 1474
前端页面点开正常，刷新后报404，设置默认主页
vue 部署之后二次刷新页面报404 解决方案
柳旦旦的博客【PHP面试网博主】
06-08 1181
vue 部署之后，页面第一次可以正常显示，但是刷新页面之后就变成了404错误。 原因： vue-router默认 hash 模式 —— 使用 URL 的 hash 来模拟一个完整的 URL，于是当 URL 改变时，页面不会重新加载。 解决方案： 官方已经给除了解决方案，如果你是 nginx 配置，可以修改配置 location / { try_files $uri $uri/ /index.html; } 其他的你可以看官方给出的方案： https://router.vuejs.org.
Tomcat权限问题，导致每次访问页面第一次正常，第二次报错404
Erick的专栏
09-24 5057
Tomcat报错，WARNING: Failed to delete generated Java file [/var/tomcat/default/work/Catalina/localhost/_/org/apache/jsp/WEB_002dINF/jsp/frontend/usercent/Starting_005fwork_jsp.java] 此问题是因为，没有去写 /var
解决VUE-Router 同一页面第二次进入不刷新的问题
10-15
在开发Vue.js应用时，...通过上述方法，我们可以解决Vue-Router中同一页面第二次进入不刷新的问题，并且可以有效处理页面刷新时的参数丢失问题，保证用户的操作体验。希望这些解决方案对你在实际开发过程中有所帮助。
vue3项目部署到服务器，刚打开没事，一刷新页面就404
pig_ning的博客
01-12 1232
vue3项目部署到服务器，刚打开没事，一刷新页面就404
解决vue请求接口第一次成功,第二次失败问题
10-14
总的来说，解决Vue请求接口第一次成功、第二次失败的问题需要从多个角度排查，包括但不限于数据的正确管理、请求的类型和跨域策略。通过仔细分析请求和响应的细节，通常可以找到问题的根源并采取相应的解决措施。
Vue项目 刷新出现404问题
星浩的博客
08-31 2342
将用于路由的js文件里面的mode值改下就行，例如我的js文件如下图。mode: 'history' 修改为 mode: 'hash'配置文件里，添加如下代码，再刷新就OK了。
vue遇到刷新404问题
ChiChengIT的专栏
10-15 281
vue刷新报404问题 nginx配置 （vue.js官方教程里提到的https://router.vuejs.org/zh-cn/essentials/history-mode.html） server { listen 8787; server_name localhost; root /root/MBShop/static...
nginx 代理前端项目，访问首页正常，刷新后 nginx 404
zc135565的博客
06-09 1247
nginx 代理前端项目，访问首页正常，刷新后 nginx 404
解决关于vue中刷新页面会报错问题
qq_45094682的博客
09-28 2230
先看图说话，vue报错 Refused to apply style from ‘http://xxxstatic/css/chunk-elementUI.ded27da0.css’ because its MIME type (‘text/html’) is not a supported stylesheet MIME type, and strict MIME checking is enabled. GET http://192.168.xxx/static/js/app.d42ea2ce.js n
关于vue-router懒加载发版后js报404的问题
buyorbye的博客
01-06 1485
最近的项目是基于vue-element-admin创建的，里边涉及到路由懒加载，如 { path: '/login', name: 'login', component: () => import('@/views/login/index'), hidden: true } 在使用过程中发现，本地测试时没问题，但当打包上测试或者发生产时，如果用户原本...
vue3 本地开发页面刷新 404
m0_67216770的博客
07-21 522
但是，都是在部署之后的问题。提到了根目录，想到了webpack配置里面的public配置，原来是这样的。网上搜了，结果都是说history改用html5模式，createWebHistory()，需要配置，官网也有相应解释。改一个点，就可以了。...
关于vue-admin-element在切换角色登入后权限不足致使页面404
qq_39382127的博客
02-26 4351
这几天在用vue-element-admin撸后台，发现一个问题，在一个用户登出后如果他停留在只有他的权限可以使用的页面，另一个权限稍低的用户登入后因为会默认转到之前的页面因为权限不足导致页面404，点击backtohome后才可以进入该用户权限下的首页，这可能是框架开发者的实现逻辑，但登录之后首先就是404页面着实对用户体验来说确实不是很好，就自己去改了一下，如下 在src/views/logi...
Vue3实现当访问的路由不存在时跳转到404页面的方法详解
李长渊的博客
06-03 2016
Vue3实现当访问的路由不存在时跳转到404页面的方法详解
VUE3.0的404页面如何配置以及路由守卫
qq_15038701的博客
07-31 1813
vue3.0配置404页面，router中增加一行这样的代码即可，关键要素/catchAll(.*)
vue 判断是否第一次打开此页面
04-02
<think>好的，我现在需要回答用户的问题：如何在Vue中检测页面是否是首次加载。根据用户提供的引用，我需要先整理这些信息，然后结合自己的知识来给出正确的步骤。 首先，用户引用的内容中，引用[4]提到了在mounted钩子中使用performance.navigation.type来判断页面加载类型。这似乎是一个关键点。PerformanceNavigation.type属性可以返回页面是如何被加载的。根据MDN文档，这个属性可能的值有0（TYPE_NAVIGATE，用户通过正常导航进入页面，比如点击链接或输入URL）、1（TYPE_RELOAD，页面通过刷新加载）、2（TYPE_BACK_FORWARD，通过前进或后退按钮加载）。不过，需要注意的是，这个API已经被弃用，属于传统Navigation Timing API的一部分，现代推荐使用PerformanceNavigationTiming。但可能在用户提到的上下文中，Vue项目中仍然可以使用这种方法。 接着，引用[1]中的博客可能也提到了类似的方法，即通过检查performance.navigation.type的值是否为0来判断是否是首次加载。用户的问题是关于Vue的，所以在Vue组件中，通常会在生命周期钩子如mounted或created里执行这样的检查。 另外，引用[5]提到了优化首次加载时间，虽然与检测无关，但说明用户可能关心的是首次加载时的性能问题，检测是否是首次加载可能用于优化或统计。 不过需要确认performance.navigation.type的兼容性和正确性。根据Web标准，PerformanceNavigation.type确实在旧版中使用，但已被PerformanceNavigationTiming取代。但实际在浏览器中，可能仍然有效，尤其是在需要支持旧版浏览器的情况下。 因此，步骤可能是在Vue组件的mounted钩子中，访问performance.navigation.type，如果值为0，则为首次加载，否则是刷新或通过历史记录导航。但需要注意兼容性问题和废弃警告。 另外，用户可能还需要其他方法，比如使用Vue Router的导航守卫，或者结合sessionStorage来标记是否已经加载过。例如，在首次加载时设置一个标记，之后检查该标记是否存在。这种方法可能更可靠，尤其是在现代浏览器中。 例如，在App.vue的created钩子中，检查sessionStorage中是否存在某个键，如果不存在，则认为是首次加载，并设置该键。这样，当用户刷新页面时，sessionStorage仍然存在，直到会话结束。但用户可能需要区分首次进入应用和刷新页面，而sessionStorage在页面刷新后仍然存在，所以这种方法可能无法区分首次加载和刷新。因此，可能需要结合其他方法。 回到引用[4]，给出的代码示例是在mounted中使用performance.navigation.type。这种情况下，type为0表示首次加载，1表示刷新。但需要验证这一点是否正确。 另外，用户可能还需要考虑服务器端渲染（SSR）的情况，如引用[3]提到的，此时首次加载的检测可能与客户端不同。但在用户的问题中，可能主要针对客户端渲染的Vue应用。 综上，正确的步骤可能包括： 1. 在Vue组件的mounted生命周期钩子中检查performance.navigation.type。 2. 如果值为0，则为首次加载；值为1则为刷新。 3. 注意该方法已被弃用，建议考虑替代方案，如使用PerformanceNavigationTiming API或结合浏览器特性进行判断。 4. 或者使用sessionStorage/localStorage来标记是否已加载过，但需注意其行为。 但根据用户提供的引用，引用[4]中的代码直接使用了performance.navigation.type，所以应该优先按照这种方法回答，同时指出其废弃状态，并可能提供替代方案。 因此，回答的结构应该是： - 方法一：使用performance.navigation.type（但已废弃） - 方法二：使用sessionStorage或其他客户端存储来标记 - 注意事项和替代方案 同时，需要引用用户提供的引用[4]和可能的其他引用作为支持。</think>在 Vue 中检测页面是否为首次加载，可以通过以下两种方法实现： --- ### 方法一：通过 `performance.navigation.type` 检测（传统方法） 在 Vue 组件的 `mounted` 生命周期钩子中，使用 `performance.navigation.type` 判断页面加载类型： ```javascript mounted() { switch (performance.navigation.type) { case 0: console.log("首次加载"); break; case 1: console.log("页面刷新"); break; case 2: console.log("通过浏览器历史记录导航（前进/后退）"); break; } } ``` - **首次加载**时值为 `0`，**刷新页面**时值为 `1`[^4]。 - ⚠️ 注意：此 API 属于传统 Navigation Timing 规范，部分现代浏览器已弃用[^1]。 --- ### 方法二：通过 `sessionStorage` 标记状态（推荐） 利用浏览器存储标记首次加载状态，更可靠且兼容性更好： ```javascript created() { if (!sessionStorage.getItem('isInitialLoad')) { sessionStorage.setItem('isInitialLoad', 'true'); console.log("首次加载"); } else { console.log("非首次加载"); } } ``` - **首次加载**时设置 `sessionStorage` 标记，刷新页面后标记仍存在，直到会话结束。 - 可结合路由逻辑（如 Vue Router）实现更精细的控制。 --- ### 注意事项 1. **性能优化**：首次加载时需关注白屏时间，可通过骨架屏、代码分割（Code Splitting）或服务端渲染（SSR）优化用户体验[^2][^3][^5]。 2. **替代 API**：若需现代替代方案，可使用 `PerformanceNavigationTiming` API（需检查浏览器支持）： ```javascript const navigationEntry = performance.getEntriesByType('navigation')[0]; if (navigationEntry.type === 'navigate') { console.log("首次加载"); } ``` ---
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值