vue3项目history模式部署404处理,使用 historyApiFallback 中间件支持单页面应用路由

vue3项目history模式部署404处理,使用 historyApiFallback 中间件支持单页面应用路由

在现代的 web 开发中,单页面应用(SPA)变得越来越流行。这类应用通常依赖于客户端路由来提供流畅的用户体验,但在服务器端,我们需要一种方式来确保这些路由能正常工作

这里,我们将使用vue-router不同的历史模式 | Vue Router官方推荐的 historyApiFallback 中间件,以及它如何帮助解决 SPA 路由问题。

解决的问题

当我们通过vue-router,history模式打包部署上线的时候,

const router = createRouter({history: createWebHistory(),// 对于无法匹配的页面统一返回404页面routes: [{ path: '/:pathMatch(.*)', component: NotFoundComponent }],
})

可能遇到用户访问http://192.168.78.17:3000/awfwfaeageege页面,会出现报错,而不是返回前端指定404页面

请添加图片描述

而我们想要实现的效果是这样,返回404页面

请添加图片描述
这时候就可以使用express中间件historyApiFallback

当你访问 http://192.168.78.17:3000/awfwfaeage 时,整个流程的工作原理如下:

1. 客户端请求
  • 用户在浏览器中输入 http://192.168.78.17:3000/awfwfaeage,浏览器发起一个 HTTP 请求到服务器。
2. 服务器处理请求
  • 服务器收到这个请求后,会检查该请求的 URL /awfwfaeage
  • 如果服务器没有找到与该 URL 对应的文件或路由,它通常会返回一个 404 错误。这意味着服务器不知道如何处理这个请求。
3. 返回 index.html
  • 在使用 Vue Router 的历史模式下,通常需要配置服务器以处理所有路由请求,重定向到 index.html。这样即使 URL 不对应于某个文件,服务器仍然能够返回前端的单页应用程序。
  • 如果服务器配置不当,仍然会返回 404 页面,而不是返回 index.html
4. 前端处理
  • 如果服务器返回了 index.html,浏览器会加载这个 HTML 文件。Vue 应用会启动并初始化。
  • Vue Router 在初始化时会检查当前的 URL(即 /awfwfaeage),并尝试找到与之匹配的路由。
5. 路由匹配
  • 如果没有定义对应 /awfwfaeage 的路由,Vue Router 会根据设置返回一个 404 组件或页面,提示用户没有找到对应的内容。
总结流程
  1. 用户请求 URL:/awfwfaeage
  2. 服务器未找到文件或路由,返回 404 错误。
  3. 如果服务器配置错误,返回的不是 index.html,而是一个 404 页面。
  4. 如果返回了 index.html,Vue 应用启动,但由于没有匹配的路由,最终呈现 404 页面。

什么是 historyApiFallback

historyApiFallback 是一个用于 Node.js 的中间件,常与 Express 框架结合使用。它的主要作用是拦截所有请求,确保未找到的路由返回主 HTML 文件(通常是 index.html,注意是返回文件,而不是重定向),从而允许前端路由接管。

传统路由的挑战

在传统的多页面应用中,每一个 URL 通常都有对应的服务器端处理逻辑。但在 SPA 中,所有的路由都是由客户端的 JavaScript 处理的。当用户直接访问一个深层路由(例如 /some-route)时,服务器可能找不到相应的资源,这将导致 404 错误。

historyApiFallback 的工作原理

  1. 拦截请求:当用户请求一个不对应于静态文件的 URL,historyApiFallback 会拦截这个请求。
  2. 返回 HTML 文件:中间件会返回指定的 HTML 文件,而不是进行重定向。这样,浏览器的地址栏保持用户访问的路径,前端 JavaScript 则可以根据这个路径来渲染相应的内容。
示例代码

以下是如何在 Express 应用中使用 historyApiFallback 的示例:

javascriptCopy Codeconst express = require('express');
const historyApiFallback = require('connect-history-api-fallback');const app = express();// 使用 historyApiFallback 中间件
app.use(historyApiFallback());// 静态文件服务
app.use(express.static('public'));// 其他 API 路由
app.get('/api/some-endpoint', (req, res) => {res.json({ message: 'Hello World!' });
});const PORT = 3000;
app.listen(PORT, () => {console.log(`Server is running on http://localhost:${PORT}`);
});

在这个例子中,当用户访问 /some-route 时,historyApiFallback 会拦截这个请求并返回 index.html。接下来,前端的 JavaScript 可以根据当前 URL 进行相应的路由处理。

前端附加说明

这有一个注意事项。你的服务器将不再报告 404 错误,因为现在所有未找到的路径都会显示你的 index.html 文件。为了解决这个问题,你应该在你的 Vue 应用程序中实现一个万能的路由来显示 404 页面。

const router = createRouter({history: createWebHistory(),// 对于无法匹配的页面统一返回404页面routes: [{ path: '/:pathMatch(.*)', component: NotFoundComponent }],
})

优势总结

使用 historyApiFallback 有几个明显的优势:

  • 简化路由管理:不需要为每个路由设置服务器端处理,前端可以完全控制路由。
  • 提高用户体验:用户在地址栏中看到的 URL 与他们访问的内容一致,避免了 404 错误页面的困扰。
  • 适配 SPA:非常适合使用 React、Vue 或 Angular 等框架构建的单页面应用。

结论

historyApiFallback 中间件是支持单页面应用路由的重要工具,它确保了 SPA 在用户直接访问特定路径时能正确地返回主 HTML 页面。通过这种方式,我们可以让前端路由更顺畅,同时提升用户体验。如果你正在开发一个 SPA,强烈建议考虑使用这个中间件来管理路由。

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.rhkb.cn/news/465093.html

如若内容造成侵权/违法违规/事实不符,请联系长河编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

【vim文本编辑器gcc编译器gdb调试器】

提示:文章写完后,目录可以自动生成,如何生成可参考右边的帮助文档 文章目录 一、vimvim安装vim常用快捷键vim使用vimtutor zh文档 二、gcc编译器安装gcc工具编译源代码 三、gdb调试器gdb安装gdb常用指令gdb简单上手使用gdb的单步调试功能 总结…

企业数字化转型的架构治理策略:核心问题、深度分析与优化路径

在当今的商业环境中,企业数字化转型已成为实现可持续发展、增强竞争力的战略选择。企业架构治理(Enterprise Architecture Governance Capability, EAGC)在数字化转型中扮演着保障架构一致性、提升变革效能的关键角色。本指南深入解析了如何通…

基于springboot+vue实现的农产品物流系统

基于springbootvue实现的农产品物流系统 (源码L文ppt)4-107 摘 要 随着现代信息技术的迅猛发展,农产品物流系统应运而生,成为连接生产者与消费者的重要桥梁。该系统采用java语言, Spring Boot框架,结合My…

基于uniapp和java的电动车智能充电系统软件平台的设计

文章目录 项目介绍具体实现截图技术介绍mvc设计模式小程序框架以及目录结构介绍错误处理和异常处理java类核心代码部分展示详细视频演示源码获取 项目介绍 对电动车智能充电系统进行设计和开发。通过使用本系统可有效地减少运营成本,提高管理效率。 根据近年来社会…

Jmeter命令监控CPU等指标

JMeter 命令行执行脚本得到的报告中,是没有CPU、内存使用率等监控数据的,但是可以使用JMeter插件帮忙。 一、下载jmeter-plugins-manager.jar 下载后将文件放到jmeter安装包lib/ext目录下。打开Jmeter》菜单栏》选项》Plugins Manager 二、安装PerfMon…

ubuntu20.04 加固方案-检查是否设置登录超时

一、编辑/etc/profile配置文件 打开终端。 使用文本编辑器(如vim)编辑/etc/profile 文件。 vi /etc/profile 二、添加配置参数 在打开的配置文件中,如图位置添加如下参数: TMOUT1800 export TMOUT三、保存并退出 在vim编辑器…

HarmonyOS使用arkTS拉起指定第三方应用程序

HarmonyOS使用arkTS拉起指定第三方应用程序 前言代码及说明bundleName获取abilityName获取 前言 本篇只说采用startAbility方式拉起第三方应用,需要用到两个必备的参数bundleName,abilityName,本篇就介绍如何获取参数… 代码及说明 bundle…

32位汇编——通用寄存器

通用寄存器 什么是寄存器呢? 计算机在三个地方可以存储数据,第一个是把数据存到CPU中,第二个把数据存到内存中,第三个把数据存到硬盘上。 那这个所谓的寄存器,就是CPU中用来存储数据的地方。那这个寄存器有多大呢&a…

江协科技STM32学习- P35 硬件I2C读写MPU6050

🚀write in front🚀 🔎大家好,我是黄桃罐头,希望你看完之后,能对你有所帮助,不足请指正!共同学习交流 🎁欢迎各位→点赞👍 收藏⭐️ 留言📝​…

【大数据学习 | HBASE】habse的表结构

在使用的时候hbase就是一个普通的表,但是hbase是一个列式存储的表结构,与我们常用的mysql等关系型数据库的存储方式不同,mysql中的所有列的数据是按照行级别进行存储的,查询数据要整个一行查询出来,不想要的字段也需要…

【dvwa靶场:XSS系列】XSS (Reflected)低-中-高级别,通关啦

一、低级low 简单拿捏 <script>alert(123)</script>二、中级middle 源码过滤了script但是没有过滤大小写&#xff0c;改成大写S <Script>alert(123)</script>三、高级high 比中级高&#xff0c;过滤了script并且以及大小写&#xff0c;使用其他标…

NAT实验

一、网络拓扑 二、实验步骤 1.配ip地址 用缺省路由充当网关 2.配置telent服务 3.配置公网互通&#xff0c;在PC1上ping R3的公网地址&#xff0c;测试是否可以访问互联网 [R1]ip route-static 0.0.0.0 0 10.1.1.2 [R3]ip route-static 0.0.0.0 0 10.2.2.2 此时私网是ping不通…

Centos 7系统一键安装宝塔教程

服务器推荐青鸟云服务器&#xff0c;2H2G低至16元/月 官网地址&#xff1a; 所有产品_香港轻量云 2核 2G-A型_青鸟云 推荐Finalshell软件连接至服务器&#xff0c;下载地址&#xff1a; https://dl.hostbuf.com/finalshell3/finalshell_windows_x64.exe 下载完成后连接服务…

Kafka 之顺序消息

前言&#xff1a; 在分布式消息系统中&#xff0c;消息的顺序性是一个重要的问题&#xff0c;也是一个常见的业务场景&#xff0c;那 Kafka 作为一个高性能的分布式消息中间件&#xff0c;又是如何实现顺序消息的呢&#xff1f;本篇我们将对 Kafka 的顺序消息展开讨论。 Kafk…

SpringBoot day 1105

ok了家人们&#xff0c;今天继续学习spring boot&#xff0c;let‘s go 六.SpringBoot实现SSM整合 6.1 创建工程&#xff0c;导入静态资源 <!DOCTYPE html> <html lang"en"> <head><meta charset"UTF-8"><title>Title</…

fastbootd模式刷android固件的方法

1. fastbootd追根溯源 Google在Android 10上正式引入了动态分区机制来提升OTA的可扩展性。动态分区使能后&#xff1a;andorid系统可以在开机阶段动态地进行分区创建、分区销毁、分区大小调整等操作&#xff0c;下游厂商只需要规划好super分区的总大小&#xff0c;其内部的各个…

什么是多因素身份验证(MFA)的安全性?

多因素身份验证(MFA)简介 什么是MFA 多因素身份验证(MFA)是一种安全过程&#xff0c;要求用户在授予对系统、应用程序或账户的访问权限之前提供两种或多种形式的验证。仅使用单个因素&#xff08;通常是用户名和密码&#xff09;保护资源会使它们容易受到泄露&#xff0c;添加…

2024年【汽车修理工(高级)】考试总结及汽车修理工(高级)试题及解析

题库来源&#xff1a;安全生产模拟考试一点通公众号小程序 汽车修理工&#xff08;高级&#xff09;考试总结是安全生产模拟考试一点通总题库中生成的一套汽车修理工&#xff08;高级&#xff09;试题及解析&#xff0c;安全生产模拟考试一点通上汽车修理工&#xff08;高级&a…

qt QFontDialog详解

1、概述 QFontDialog 是 Qt 框架中的一个对话框类&#xff0c;用于选择字体。它提供了一个可视化的界面&#xff0c;允许用户选择所需的字体以及相关的属性&#xff0c;如字体样式、大小、粗细等。用户可以通过对话框中的选项进行选择&#xff0c;并实时预览所选字体的效果。Q…

DolphinScheduler告警通知

DolphinScheduler告警通知 Dolphinscheduler支持多种告警媒介&#xff0c;此处以电子邮件为例进行演示。 1 准备邮箱 如需使用DolphinScheduler的电子邮件告警通知功能&#xff0c;需要准备一个电子邮箱账号&#xff0c;并启用SMTP服务。此处以 QQ 邮箱为例。 1.1 开启 SMTP 服…