connect-history-api-fallback中间件解决history路由模式浏览器刷新404问题

现象:Angular、Vue和React项目SPA应用如果路由模式为history,部署到服务器后,点击浏览器刷新按钮会出现404。
connect-history-api-fallback中间件解决history路由模式浏览器刷新404问题_第1张图片
原因:当路由模式为history的时候,服务器端会根据浏览器中的请求地址去匹配资源,此时服务器端没有对应的接口地址,因此返回404.
解决办法:使用connect-history-api-fallback中间件

安装connect-history-api-fallback中间件
npm install --save connect-history-api-fallback
在app.js文件中增加以下代码
const history = require('connect-history-api-fallback')
app.use('/', history());
重新启动服务

你可能感兴趣的:(angular,vue.js,react.js,history,router)