history模式前端路由部署后访问/刷新页面404问题

Holly1945

已于 2022-04-29 13:34:11 修改

阅读量4.3k

点赞数 1

分类专栏： vue 文章标签：前端 vue.js webpack

于 2021-12-17 14:29:41 首次发布

本文链接：https://blog.csdn.net/Holly1945/article/details/121995472

版权

在使用HTML5 History API的前端路由时，刷新页面可能导致404错误。通过配置webpack的historyApiFallback选项，可以将所有404请求重定向到index.html。在Vue.js项目中，history模式的router需配置base属性，通常设为'/'。在webpack-dev-server中，可以使用`webpack serve --history-api-fallback`启用该配置。

摘要由CSDN通过智能技术生成

前端路由实际是路由与组件的映射表
访问任何路径，服务器只需要响应index.html （单页面应用）
浏览器根据不同路由匹配要渲染的内容

刷新操作时候：浏览器会带着地址栏路由请求服务器返回相应地静态资源
如果没有找到对应的资源返回 404

配置nginx:

location / {
   
    root /...
    # vue工程的路由是history模式
    try_files $uri $uri/ /index.html; // ** 重点加上这个配置
    index index.html index.html
}

前端 HTML5 History API

historyApiFallback

historyApiFallback 主要是用来解决HTML5 History

最低0.47元/天解锁文章

Holly1945

关注

1
点赞
踩
5

收藏

觉得还不错? 一键收藏
0
评论
history模式前端路由部署后访问/刷新页面404问题

前端路由实际是路由与组件的映射表访问任何路径，服务器只需要响应index.html （单页面应用）浏览器根据不同路由匹配要渲染的内容刷新操作时候：浏览器会带着地址栏路由请求服务器返回相应地静态资源如果没有找到对应的资源返回 404配置nginx:location / { root /... # vue工程的路由是history模式 try_files $uri $uri/ /index.html; // ** 重点加上这个配置 index index.h
复制链接

扫一扫