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('服务器启动成功!')})

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

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

相关文章

ABCDE类网络的划分及保留网段

根据IP地址的分类,IP地址被分为A、B、C、D和E五类。下面是对ABCDE类网络的划分及保留网段的详细描述: A类网络:范围从1.0.0.0到127.0.0.0,网络地址的最高位必须是“0”,可用的A类网络有127个,每个网络能容…

【算法提升—力扣每日一刷】五日总结【11/30-12/04】

2023/11/30 力扣每日一刷:1.两数之和 给定一个整数数组 nums 和一个整数目标值 target,请你在该数组中找出 和为目标值 target 的那 两个 整数,并返回它们的数组下标。 你可以假设每种输入只会对应一个答案。但是,数组中同一个元…

TCP协议实现一对一聊天

服务端代码: import java.io.BufferedReader; import java.io.IOException; import java.io.InputStreamReader; import java.io.PrintWriter; import java.net.ServerSocket; import java.net.Socket; import java.util.Scanner;/*** 发送消息线程*/ class Send e…

【Linux】tar、zip与rar

前言 我解压过无数的文件,却唯独无法解压自己。 tar tar是一个常用的文件打包和归档工具,它在Linux系统中被广泛使用。它的名称"tar"代表"tape archive"(磁带归档),最初用于将多个文件和目录打…

JVM的知识点

### 1. JVM基础知识 - **JVM结构:** 详细介绍JVM内部结构,包括类加载器、运行时数据区域(堆、栈、方法区/元空间)、执行引擎和本地接口等组成部分的功能和作用。 - **类加载器:** 深入了解类加载器的层次结构和加载过…

linux无法打开M4a格式音频的解决方法

linux是开源系统,之所以打不开,是因为部分linux系统为了避免版权问题,没有m4a的解码插件。所以,解决的办法是安装如下两个非常小的转换器,我们一般用不到转换器的功能,而是反向应用,通过两个几十…

『亚马逊云科技产品测评』活动征文|基于亚马逊EC2云服务器安装Bolo开源博客

授权声明:本篇文章授权活动官方亚马逊云科技文章转发、改写权,包括不限于在 Developer Centre, 知乎,自媒体平台,第三方开发者媒体等亚马逊云科技官方渠道 亚马逊EC2云服务器(Elastic Compute Cloud)是亚马…

shell脚本实战之mysql-物理备份实现周内备份策略

一.shell脚本要求 # 数据库备份脚本方式: 物理备份# 工具:xtrabackup过程# 需求1:不允许有任何的安在脚本中,# 需求2:在脚本中,不允许有任何的交互式代码容,使用日志记录# 需求3:在脚本中,不允许有任何输出# 需求4:每周为一个循环…

TA-Lib学习研究笔记(九)——Pattern Recognition (6)

TA-Lib学习研究笔记(九)——Pattern Recognition (6) 最全面的形态识别的函数的应用,通过使用A股实际的数据,验证形态识别函数,用K线显示出现标志的形态走势,由于入口参数基本上是o…

百度/抖音/小红书/微信搜索品牌形象优化怎么做?

搜索口碑是网络营销不可或缺的一部分,企业如何做好品牌搜索口碑优化呢?小马识途营销顾问建议从以下几方面入手。 1. 通过关键字优化提高自身知名度 通过对竞争对手和目标客户的关键字进行分析,企业可以确定哪些关键字可以提高自身品牌知名度。…

当代体育科技杂志社《当代体育科技》杂志社2023年第31期目录

专家论坛 基于信息化平台的体育专业学生教学文件撰写能力培养的探索与实践 王彤;闫艾萍;龙勋;杨欢;邢欣; 1-4 运动人体科学《当代体育科技》投稿:cn7kantougao163.com 有氧舞蹈项目运动强度分析——以吉林省第十七届大学生运动会有氧舞蹈项目为例 李岱峰; 5…

IDEA Maven 配置国内源

基本步骤 分别设置下图的两个,一个是对当前项目的设置,一个是对以后创建的项目设置,这样以后就不用重新配置了。 将下面的两个勾选上 注意,两个地方,Settings 和 Settings for New Projects 的勾都要勾上。 前往 User…

PHP短信接口防刷防轰炸多重解决方案三(可正式使用)

短信接口盗刷轰炸:指的是黑客利用非法手段获取短信接口的访问权限,然后使用该接口发送大量垃圾短信给目标用户 短信验证码轰炸解决方案一(验证码类解决)-CSDN博客 短信验证码轰炸解决方案二(防止海外ip、限制ip、限制手机号次数解决)-CSDN博客 PHP短信…

SQL Sever 基础知识 - 数据筛选(1)

SQL Sever 基础知识 - 四、数据筛选 四、筛选数据第1节 DISTINCT - 去除重复值1.1 SELECT DISTINCT 子句简介1.2 SELECT DISTINCT 示例1.2.1 DISTINCT 一列示例1.2.2 DISTINCT 多列示例 1.2.3 DISTINCT 具有 null 值示例1.2.4 DISTINCT 与 GROUP BY 对比 第2节 WHERE - 过滤查询…

8_企业架构缓存中间件分布式memcached

企业架构缓存中间件分布式memcached 学习目标和内容 1、能够理解描述网站业务访问流程 2、能够理解网站业务的优化方向 3、能够描述内存缓存软件Memcached的作用 4、能够通过命令行操作Memcached 5、能够操作安装php的memcached扩展 extension 6、能够实现session存储到memcach…

mysql数据库(表)误删恢复

mysql数据库(表)误删恢复 1. 检查mysql服务是否开启binlog # 查看是否开启binlog日志 show variables like %log_bin%;看下图结果.如果这里是OFF那就不用看下去了.本文帮助不了 2.开启binlog日志(已开启略过) 1、编辑打开mysql配置文件 ***/my.cnf在 [mysqld]区块添加 l…

第五届CECC中国计算机教育大会召开,文心大模型助力跨学科创新融合

随着科技的飞速发展,大模型已经成为教育、科研等领域的热点话题。12月2日至3日,以“新时代 新计算 新理念”为主题的第五届中国计算机教育大会(CECC)在厦门召开,百度飞桨和文心大模型承办的“大模型技术创新与教育实践…

婴儿专用洗衣机有必要吗?宝宝洗衣机洗衣服

相信各位宝爸宝妈都有同样的苦恼,那就是宝宝的衣服该怎么来洗宝宝每天都有一大堆衣物和各种巾要洗,如果单纯用手洗,真的是一个很大的工程,将宝宝的衣服丢进去家庭用的洗衣机,宝宝稚嫩的皮肤又怕会被细jun感染到&#x…

【harmonyOS开发】健康生活应用

一、业务需求 用户可以创建最多6个健康生活任务(早起,喝水,吃苹果,每日微笑,刷牙,早睡),并设置任务目标、是否开启提醒、提醒时间、每周任务频率。用户可以在主页面对设置的健康生活…

智能优化算法应用:基于梯度算法无线传感器网络(WSN)覆盖优化 - 附代码

智能优化算法应用:基于梯度算法无线传感器网络(WSN)覆盖优化 - 附代码 文章目录 智能优化算法应用:基于梯度算法无线传感器网络(WSN)覆盖优化 - 附代码1.无线传感网络节点模型2.覆盖数学模型及分析3.梯度算法4.实验参数设定5.算法结果6.参考文献7.MATLAB…