当前位置: 首页 > news >正文

history路由解决刷新出现404的问题

本文具体重点介绍怎么解决浏览器路由(history模式)解决404的问题。

        在项目打包上线时,如果采用的是哈希模式,不会出现404,原因是 url 中 # 号后面的内容不会发给后端当作资源路径请求服务器。

具体流程(哈希模式):

1. 前端项目写完之后,把src件夹打包 (利用webpack、babel把项目里面的jsx / vue 、scss文件变异成js、css和html),命令如下

npm run build
完成之后会出现 dist 文件夹,里面包含:

 该html文件需部署在服务器上才能正常显示(只有一个html文件,是因为项目本身是SPA),

新建static文件夹,将dist里面的文件放入static。

2. 搭建服务器

        新建一个文件夹用vscode打开后,

npm init
 
// 然后设置 package name,回车
 
npm i express
接着新建 server.js文件:

// common.js 规范

    // 引入 expressconst express = require('express')// 利用中间件 给服务器指定静态资源(打包后的项目文件)app.use(express.static(__dirname+'/static'))// 新建实例const app = express()// 配置后端路由app.get('/person',(request,response)=>{// 给浏览器返回的信息response.send({name:'tom',age:19})})// 开启监听app.listen(5005,(err)=>{if(!err) conslole.log('服务器启动成功!')})


3. 启动服务器

node server
可以看到: 

浏览器输入localhost:5005/person ,查看信息:

history 模式下刷新出现 404解决 

         1. 根据前端发送的请求以及后端已有的资源路径做判断(正则)匹配,区分哪些是前端路由哪些是后端路由。

        2. nginx 中间代理区分前后端路由

        3. node.js提供的中间件Connect

npm instal connect-history-api-fallback
// common.js 规范
 

// 引入 expressconst express = require('express')const history = require('connect-history-api-fallback');// 新建实例const app = express()app.use(history());// 利用中间件 给服务器指定静态资源(打包后的项目文件)app.use(express.static(__dirname+'/static'))// 配置后端路由app.get('/person',(request,response)=>{// 给浏览器返回的信息response.send({name:'tom',age:19})})// 开启监听app.listen(5005,(err)=>{if(!err) conslole.log('服务器启动成功!')})

相关文章:

history路由解决刷新出现404的问题

本文具体重点介绍怎么解决浏览器路由(history模式)解决404的问题。 在项目打包上线时,如果采用的是哈希模式,不会出现404,原因是 url 中 # 号后面的内容不会发给后端当作资源路径请求服务器。 具体流程(哈…...

ubuntu22下使用nvidia 2080T显卡部署pytorch

1.直接到NVIDA官网下载相应的驱动,然后安装官方驱动 | NVIDIA 2.下载相应版本cuda,并安装,安装时不安装驱动 3.conda install pytorch2.1.0 torchvision0.16.0 torchaudio2.1.0 pytorch-cuda12.1 -c pytorch -c nvidia 安装pytorch。 安装…...

【Spark基础】-- 理解 Spark shuffle

目录 前言 1、什么是 Spark shuffle? 2、Spark 的三种 shuffle 实现 3、参考 前言 以前,Spark 有3种不同类型的 shuffle 实现。每种实现方式都有他们自己的优缺点。在我们理解 Spark shuffle 之前,需要先熟悉 Spark 的 execution model 和一些基础概念,如:MapReduce、…...

软件测试入门:静态测试

什么是静态测试 顾名思义,这里的静态是指程序的状态,即在不执行代码的情况下检查软件应用程序中的缺陷。进行静态测试是为了仅早在开发的早期阶段发现程序缺陷,因为这样可以更快速地识别缺陷并低成本解决缺陷,它还有助于查找动态测…...

力扣labuladong一刷day30天二叉树

力扣labuladong一刷day30天二叉树 文章目录 力扣labuladong一刷day30天二叉树一、654. 最大二叉树二、105. 从前序与中序遍历序列构造二叉树三、106. 从中序与后序遍历序列构造二叉树四、889. 根据前序和后序遍历构造二叉树 一、654. 最大二叉树 题目链接:https://…...

【云原生-K8s】检查yaml文件安全配置kubesec部署及使用

基础介绍基础描述特点 部署在线下载百度网盘下载安装 使用官网样例yamlHTTP远程调用安全建议 总结 基础介绍 基础描述 Kubesec 是一个开源项目,旨在为 Kubernetes 提供安全特性。它提供了一组工具和插件,用于保护和管理在 Kubernetes 集群中的工作负载和…...

LeetCode力扣每日一题(Java):20、有效的括号

一、题目 二、解题思路 1、我的思路 我看到题目之后&#xff0c;想着这可能是力扣里唯一一道我能秒杀的题目了 于是一波操作猛如虎写出了如下代码 public boolean isValid(String s) {char[] c s.toCharArray();for(int i0;i<c.length;i){switch (c[i]){case (:if(c[i]…...

解决Flutter运行报错Could not run build/ios/iphoneos/Runner.app

错误场景 更新了IOS的系统版本为最新的17.0, 运行报以下错误 Launching lib/main.dart on iPhone in debug mode... Automatically signing iOS for device deployment using specified development team in Xcode project: GN3DCAF71C Running Xcode build... Xcode build d…...

配置Smart Link主备备份示例

目录 实验拓扑 组网需求 配置思路 配置步骤 1.配置VLAN信息 2.在SwitchA上创建Smart Link备份组&#xff0c;并指定端口角色 3.使能回切功能并设置回切时间 4.使能发送Flush报文功能 5.使能接受Flush报文功能 验证配置结果 实验拓扑 组网需求 如上图所示&#xff0c;…...

03-微服务架构构建之微服务拆分

文章目录 前言一、微服务拆分的原则二、微服务拆分的时机三、微服务拆分的方法总结 前言 微服务架构是将一个单体应用程序拆分为一个个独立且保持松耦合的服务的一种架构方式&#xff0c;每个服务有着独立的数据库并且能独立运行部署。微服务架构的构建过程中&#xff0c;第一…...

Linus:我休假的时候也会带着电脑,否则会感觉很无聊

目录 Linux 内核最新版本动态 关于成为内核维护者 代码好写&#xff0c;人际关系难处理 内核维护者老龄化 内核中 Rust 的使用 关于 AI 的看法 参考 12.5-12.6 日&#xff0c;Linux 基金会组织的开源峰会&#xff08;OSS&#xff0c;Open Source Summit&#xff09;在日…...

快速排序的新用法

普通快排 简介 快速排序是一种高效的排序算法&#xff0c;利用分治的思想进行排序。它的基本原理是在待排序的n个数据中任取一个数据为分区标准&#xff0c;把所有小于该排序码的数据移到左边&#xff0c;把所有大于该排序码的数据移到右边&#xff0c;中间放所选记录&#x…...

利用乔拓云SAAS系统,快速、高效搭建小程序

a-service&#xff0c;软件即服务&#xff09;系统来搭建他们的微信小程序。SAAS系统作为一种创新的软件应用模式&#xff0c;将软件作为一种服务提供给用户&#xff0c;为用户提供了更高效、更便捷的解决方案。本文将探讨为什么越来越多的商家选择使用乔拓云这种SAAS系统搭建小…...

Kubernetes(K8s 1.27.x) 快速上手+实践,无废话纯享版

文章目录 1 基础知识1.1 K8s 有用么&#xff1f;1.2 K8s 是什么&#xff1f;1.3 k8s 部署方式1.4 k8s 环境解析 2 环境部署2.1 基础环境配置2.2 容器环境操作2.3 cri环境操作2.4 harbor仓库操作2.5 k8s集群初始化2.6 k8s环境收尾操作 3 应用部署3.1 应用管理解读3.2 应用部署实…...

非常抱歉的通知

非常感谢有这么多的同志向我提问一些问题&#xff0c;也非常感谢很多的同志可以看我的学习文章&#xff0c;这次大概有四五个月没有上csdn&#xff0c;看到了许多同志的疑问和慰问&#xff0c;我也很感动&#xff0c;但是由于我自己以及其他的原因&#xff0c;我现在打算以考编…...

rust 包模块组织结构

一个包&#xff08;package&#xff09;可以拥有多个二进制单元包及一个可选的库单元包。随着包内代码规模的增长&#xff0c;你还可以将代码拆分到独立的单元包&#xff08;crate&#xff09;中&#xff0c;并将它作为外部依赖进行引用。 RUST提供了一系列的功能来帮助我们管…...

深入浅出:HTTPS单向与双向认证及证书解析20231208

介绍: 网络安全的核心之一是了解和实施HTTPS认证。本文将探讨HTTPS单向认证和双向认证的区别&#xff0c;以及SSL证书和CA证书在这些过程中的作用&#xff0c;并通过Nginx配置实例具体说明。 第一部分&#xff1a;HTTPS单向认证 定义及工作原理&#xff1a;HTTPS单向认证是一…...

水利安全监测方案——基于RTU200的解决方案

引言&#xff1a; 水资源是人类赖以生存的重要基础&#xff0c;对于保障水利系统安全运行以及应对自然灾害起着关键作用。为了实现水利安全监测的目标&#xff0c;我们提出了基于RTU200的解决方案。本方案将结合RTU200的可靠性、灵活性和高效性&#xff0c;为您打造一个全面的…...

安卓开发学习---kotlin版---笔记(一)

Hello word 前言&#xff1a;上次学习安卓&#xff0c;学了Java开发&#xff0c;简单的搭了几个安卓界面。这次要学习Kotlin语言&#xff0c;然后开发安卓&#xff0c;趁着还年轻&#xff0c;学点新东西&#xff0c;坚持~ 未来的你会感谢现在努力的你~ 主要学习资料&#xff1a…...

挑选在线客服系统的七大注意事项

越来越多的企业开始注重客户服务&#xff0c;所以在线客服系统也逐渐成为了电商企业不可或缺的一部分。然而在挑选在线客服系统的过程中&#xff0c;蛮多企业会遇到各种各样的问题&#xff0c;这就导致了最终选择的系统并不适合自己企业的需求。接下来我将提醒大家挑选在线客服…...

LBE-LEX系列工业语音播放器|预警播报器|喇叭蜂鸣器的上位机配置操作说明

LBE-LEX系列工业语音播放器|预警播报器|喇叭蜂鸣器专为工业环境精心打造&#xff0c;完美适配AGV和无人叉车。同时&#xff0c;集成以太网与语音合成技术&#xff0c;为各类高级系统&#xff08;如MES、调度系统、库位管理、立库等&#xff09;提供高效便捷的语音交互体验。 L…...

K8S认证|CKS题库+答案| 11. AppArmor

目录 11. AppArmor 免费获取并激活 CKA_v1.31_模拟系统 题目 开始操作&#xff1a; 1&#xff09;、切换集群 2&#xff09;、切换节点 3&#xff09;、切换到 apparmor 的目录 4&#xff09;、执行 apparmor 策略模块 5&#xff09;、修改 pod 文件 6&#xff09;、…...

日语学习-日语知识点小记-构建基础-JLPT-N4阶段(33):にする

日语学习-日语知识点小记-构建基础-JLPT-N4阶段(33):にする 1、前言(1)情况说明(2)工程师的信仰2、知识点(1) にする1,接续:名词+にする2,接续:疑问词+にする3,(A)は(B)にする。(2)復習:(1)复习句子(2)ために & ように(3)そう(4)にする3、…...

汇编常见指令

汇编常见指令 一、数据传送指令 指令功能示例说明MOV数据传送MOV EAX, 10将立即数 10 送入 EAXMOV [EBX], EAX将 EAX 值存入 EBX 指向的内存LEA加载有效地址LEA EAX, [EBX4]将 EBX4 的地址存入 EAX&#xff08;不访问内存&#xff09;XCHG交换数据XCHG EAX, EBX交换 EAX 和 EB…...

深入解析C++中的extern关键字:跨文件共享变量与函数的终极指南

&#x1f680; C extern 关键字深度解析&#xff1a;跨文件编程的终极指南 &#x1f4c5; 更新时间&#xff1a;2025年6月5日 &#x1f3f7;️ 标签&#xff1a;C | extern关键字 | 多文件编程 | 链接与声明 | 现代C 文章目录 前言&#x1f525;一、extern 是什么&#xff1f;&…...

管理学院权限管理系统开发总结

文章目录 &#x1f393; 管理学院权限管理系统开发总结 - 现代化Web应用实践之路&#x1f4dd; 项目概述&#x1f3d7;️ 技术架构设计后端技术栈前端技术栈 &#x1f4a1; 核心功能特性1. 用户管理模块2. 权限管理系统3. 统计报表功能4. 用户体验优化 &#x1f5c4;️ 数据库设…...

【C++特殊工具与技术】优化内存分配(一):C++中的内存分配

目录 一、C 内存的基本概念​ 1.1 内存的物理与逻辑结构​ 1.2 C 程序的内存区域划分​ 二、栈内存分配​ 2.1 栈内存的特点​ 2.2 栈内存分配示例​ 三、堆内存分配​ 3.1 new和delete操作符​ 4.2 内存泄漏与悬空指针问题​ 4.3 new和delete的重载​ 四、智能指针…...

虚拟电厂发展三大趋势:市场化、技术主导、车网互联

市场化&#xff1a;从政策驱动到多元盈利 政策全面赋能 2025年4月&#xff0c;国家发改委、能源局发布《关于加快推进虚拟电厂发展的指导意见》&#xff0c;首次明确虚拟电厂为“独立市场主体”&#xff0c;提出硬性目标&#xff1a;2027年全国调节能力≥2000万千瓦&#xff0…...

用递归算法解锁「子集」问题 —— LeetCode 78题解析

文章目录 一、题目介绍二、递归思路详解&#xff1a;从决策树开始理解三、解法一&#xff1a;二叉决策树 DFS四、解法二&#xff1a;组合式回溯写法&#xff08;推荐&#xff09;五、解法对比 递归算法是编程中一种非常强大且常见的思想&#xff0c;它能够优雅地解决很多复杂的…...

UE5 音效系统

一.音效管理 音乐一般都是WAV,创建一个背景音乐类SoudClass,一个音效类SoundClass。所有的音乐都分为这两个类。再创建一个总音乐类&#xff0c;将上述两个作为它的子类。 接着我们创建一个音乐混合类SoundMix&#xff0c;将上述三个类翻入其中&#xff0c;通过它管理每个音乐…...