vue history模式刷新页面进入404解决方案

前言

vue 的路由模式严格意义上来讲有三种，但是常见的hash模式和history模式

• 1，默认的路由模式
• 2，hash模式，就是连接后边会跟#号
• 3，history模式
  history模式的详细配置请移步官方文档vue路由history模式

文档里有说到history模式下如果后端，前端不做任何处理，刷新页面就会报404.
后端配置请看官方文档，这里只介绍一下前端需要配置的地方

接下来就谈谈如何解决。

第一步：如何切换history模式 在router.js中配置

const router = new VueRouter({
  mode: 'history',
  base: process.env.BASE_URL,
  routes,
  // 切换路由后滚动条置顶
  scrollBehavior() {
    return {
      x: 0,
      y: 0
    }
  }
})

export default router
1
2
3
4
5
6
7
8
9
10
11
12
13
14

第二步在vue.config.js中加上如下配置

module.exports = {
    publicPath: '/',   //这个必须，引入静态资源需要从根路径引入，否则会找不到静态资源
    devServer: {
        // history模式下的url会请求到服务器端，但是服务器端并没有这一个资源文件，就会返回404，所以需要配置这一项
        historyApiFallback: {
            index: '/index.html' //与output的publicPath
        },
      },
}
1
2
3
4
5
6
7
8
9

总结

前后端同时做处理才不会在刷新找不到路径时进入404,这个总结仅限于切换为history是刷新进入404使用，如果还有特殊场景，还需要结合利用 history.pushState API来进行处理，后期有时间会更新。