Vue2:路由history模式的项目部署后页面刷新404问题处理

一、问题描述

我们把Vue项目的路由模式,设置成history
然后,build
并把dist中的代码部署到node+express服务中
访问页面后,刷新页面报404问题
在这里插入图片描述

二、原因分析

server.js文件
会发现,文件中配置的路径没有Vue项目中对应的路径
所以,刷新页面时,报404
这也是history模式的一个小问题。

const express = require('express')
const app = express()
app.use(express.static(__dirname+'/static'))app.get('/students',(request,response)=>{const students = [{id:'001',name:'tom',age:18},{id:'002',name:'jerry',age:19},{id:'003',name:'tony',age:120},]response.send(students)
})app.listen(5000,(err)=>{if(!err) console.log('服务器1启动成功了,请求学生信息地址为:http://localhost:5000/students');
})

三、解决

这个问题的本质,是请求路径在后端没对应上
所以,要解决这个问题,需要从后端代码着手

我这里用的是node+express部署项目
就这个情况,来解决

1、安装connect-history-api-fallback中间件

npm i connect-history-api-fallback

2、修改server.js
关键代码:

const history = require('connect-history-api-fallback')
app.use(history())

完整配置:

const express = require('express')
const history = require('connect-history-api-fallback')const app = express()
app.use(history())
app.use(express.static(__dirname+'/static'))app.get('/students',(request,response)=>{const students = [{id:'001',name:'tom',age:18},{id:'002',name:'jerry',age:19},{id:'003',name:'tony',age:120},]response.send(students)
})app.listen(5000,(err)=>{if(!err) console.log('服务器1启动成功了,请求学生信息地址为:http://localhost:5000/students');
})

重启项目,即可。
此时,刷新页面,不会报404问题。

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

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

相关文章

React withRouter的使用及源码实现

一 基本介绍 作用: 把不是通过路由切换过来的组件中,将react-router 的 history、location、match 三个对象传入props对象上。比如首页! 默认情况下必须是经过路由匹配渲染的组件才存在this.props,才拥有路由参数,才能…

嵌入式学习笔记Day27

今天主要学习了进程间的通信,主要学习了通过管道进行通信 一、进程间的通信 进程间的通信方式有以下几种: 1.管道 2.信号 3.消息队列 4.共享内存 5.信号灯 6.套接字二、管道 2.1无名管道 无名管道只能用于具有亲缘关系的进程间通信 函数接口&#x…

Nacos进阶

目录 Nacos支持三种配置加载方案 Namespace方案 DataID方案 Group方案 同时加载多个配置集 Nacos支持三种配置加载方案 Nacos支持“Namespacegroupdata ID”的配置解决方案。 详情见:Nacos config alibaba/spring-cloud-alibaba Wiki GitHub Namespace方案…

《TCP/IP详解 卷一》第12章 TCP初步介绍

目录 12.1 引言 12.1.1 ARQ和重传 12.1.2 滑动窗口 12.1.3 变量窗口:流量控制和拥塞控制 12.1.4 设置重传的超时值 12.2 TCP的引入 12.2.1 TCP服务模型 12.2.2 TCP可靠性 12.3 TCP头部和封装 12.4 总结 12.1 引言 关于TCP详细内容,原书有5个章…

【C++ map和set】

文章目录 map和set序列式容器和关联式容器键值对setset的主要操作 mapmap主要操作 multiset和multimap map和set 序列式容器和关联式容器 之前我们接触的vector,list,deque等,这些容器统称为序列式容器,其底层为线性序列的的数据结构,里面存…

【LV14 day4 字符设备驱动基础框架】

一、字符设备驱动框架解析 设备的操作函数如果比喻是桩的话(性质类似于设备操作函数的函数,在一些场合被称为桩函数),则: 驱动实现设备操作函数 ----------- 做桩 insmod调用的init函数主要作用 --------- 钉桩 rm…

都说了能不动就别动,非要去调整,出生产事故了吧

MyBatis 替换成 MyBatis-Plus 背景介绍 一个老项目,数据库用的是 MySQL 5.7.36 , ORM 框架用的 MyBatis 3.5.0 , mysql-connector-java 版本是 5.1.26 新来了一个干练的小伙,精力充沛,看着就是一个喜欢折腾的主 他…

leetcode 3.1

leetcode hot 100 双指针1.三数之和2.接雨水 多维动态规划1.最长公共子序列 双指针 1.三数之和 三数之和 排序 双指针的方法&#xff0c;固定一个数nums[i], 用两数和找target - nums[i] 的数需要注意两点: 1.需要去掉重复数字 while (l < r && nums[l] nums[…

社交APP开发能给用户带来什么

现在的社交软件也非常的多&#xff0c;每款社交软件都有自己的特色&#xff0c;社交软件是日常中必备的软件&#xff0c;不管是生活交流还是感情工作交流都是比较方便的&#xff0c;因为社交软件满足了日常的远程交流问题&#xff0c;所以开发社交软件也会逐渐的流行起来的。 …

Error: T doesn‘t have .length

Error: T doesn‘t have .length 在 TypeScript 中&#xff0c;当我们使用泛型 <T> 时&#xff0c;有时会遇到一个常见问题&#xff1a;编译器提示错误&#xff0c;指出泛型类型 T 不具备 .length 属性。在本文中&#xff0c;我们将探讨这个问题的解决方案&#xff0c;并…

【Qt学习】QLCDNumber的介绍与实例使用(倒计时功能)

文章目录 1. 介绍2. 实例 - QLCDNumber倒计时3. 资源文件 1. 介绍 QLCDNumber是Qt框架中用于显示数字的控件&#xff0c;它模拟了一个液晶数字显示屏。 在Designer界面中显示如下&#xff1a; 有以下 常用属性&#xff1a; 属性描述intValue获取或设置QLCDNumber显示的整数…

Redis高级特性详解:事务处理、发布订阅、持久化和集群

Redis&#xff08;Remote Dictionary Server&#xff09;是一个开源的基于内存的数据结构存储系统&#xff0c;被广泛应用于缓存、队列、计数器等场景中。除了基本的键值存储功能外&#xff0c;Redis还提供了许多高级特性&#xff0c;包括事务处理、发布订阅、持久化和集群。在…

js截取图片地址后面的参数和在路径中截取文件名或后缀名

文章目录 前言截取地址 &#xff1f;后面的参数在路径中截取文件名或后缀名总结 前言 在处理网页上的图片资源或者其他类型的文件资源时&#xff0c;你可能会遇到需要使用这些技巧的情况。以下是一些具体的使用场景&#xff1a; 动态修改图片参数&#xff1a;如果你有一个图片U…

【BBuf的CUDA笔记】十四,OpenAI Triton入门笔记三 FusedAttention

0x0. 前言 继续Triton的学习&#xff0c;这次来到 https://triton-lang.org/main/getting-started/tutorials/06-fused-attention.html 教程。也就是如何使用Triton来实现FlashAttention V2。对于FlashAttention和FlashAttention V2网上已经有非常多的介绍了&#xff0c;大家如…

Win11系统安装安卓子系统教程

随着Win11系统的不断普及&#xff0c;以及硬件设备的更新换代&#xff0c;我相信很多同学都已经更新并使用到了最新的Win11系统。那么&#xff0c;Win11系统最受期待的功能“Windows Subsystem for Android”&#xff08;简称WSA&#xff09;&#xff0c;即《安卓子系统》。他可…

spring.factories的常用配置项

概述 spring.factories 实现是依赖 spring-core 包里的 SpringFactoriesLoader 类&#xff0c;这个类实现了检索 META-INF/spring.factories 文件&#xff0c;并获取指定接口的配置的功能。 Spring Factories机制提供了一种解耦容器注入的方式&#xff0c;帮助外部包&am…

掘根宝典之C语言字符串输入函数(gets(),fgets(),get_s())

字符串输入前的注意事项 如果想把一个字符串读入程序&#xff0c;首先必须预留该字符串的空间&#xff0c;然后用输入函数获取该字符串 这意味着必须要为字符串分配足够的空间。 不要指望计算机在读取字符串时顺便计算它的长度&#xff0c;然后再分配空间(计算机不会这样做&a…

ai图生文的软件!分享4个受欢迎的!

在数字化时代&#xff0c;随着人工智能技术的飞速发展&#xff0c;AI图生文软件已经成为自媒体人、创作者和广告从业者手中的得力助手。这些软件能够将静态的图片转化为生动的文字&#xff0c;为图片注入灵魂&#xff0c;让观者仿佛置身于画面之中。今天&#xff0c;就让我们一…

LabVIEW和Python开发微细车削控制系统

LabVIEW和Python开发微细车削控制系统 为满足现代精密加工的需求&#xff0c;开发了一套基于LabVIEW和Python的微细车削控制系统。该系统通过模块化设计&#xff0c;实现了高精度的加工控制和G代码的自动生成&#xff0c;有效提高了微细车削加工的自动化水平和编程效率。 项目…

cjson报错

今天遇到个问题&#xff0c;使用CJSON把一个cjson对象给一个cjson对象的时候报错&#xff0c;是segment问题 &#xff0c;原因是我在个cjson对象数据的时候&#xff0c;有几个是char的&#xff0c;但是是个时间的字符串&#xff0c;一般20位就够了&#xff0c;但是由于是通过mo…