Node.js+express解决vue项目history打包后出现的刷新白屏问题 ----connect-history-api-fallback

Node.js+express解决vue项目history打包后出现的刷新白屏问题 ----connect-history-api-fallback

相信有人vue项目在history模式下打包后挂载到nodejs后端上面运行会出现刷新白屏问题,下面我们可以在nodejs后端考虑解决方案

首先npm对应的中间件connect-history-api-fallback,

npm install --save connect-history-api-fallback

在项目的入口文件添加下面两行
app.js

// 引入connect-history-api-fallback中间件
const history = require("connect-history-api-fallback")

// 使用
app.use(history()) // 一般在创建WEB服务器对象之后使用,该中间件必须要放在express.static中间件的前面引入

接下来再刷新屏幕,不会继续出现刷新白屏问题了

connect-history-api-fallback可选配置项

index：配置默认的index页面
rewrites：通过正则配置，配置相关路由
			rewrites中使用具有以下属性的上下文对象调用函数：
			Parsedurl：提供的有关URL的信息URL模块的url.parse 
			match：由提供的匹配结果数组String.match(...) 
			request：HTTP请求对象
verbose：日志选项

htmlAcceptHeaders：覆盖Accepts，更改请求的dataType配置
disableDotRule：禁用上面提到的点规则

官方文档传送门