前端路由刷新404问题

3,029 阅读2分钟

本篇文章仅仅是做个记录,开发的时候碰到了history刷新404问题

我们都知道在前端浏览器中,敲入一个url的时候(就比如说是:http://www.baidu.com),此时会经过dns解析,拿到ip地址然后根据ip地址向该服务器发起请求,服务器接受到请求之后,然后返回相应的结果(html,css,js). 前端去渲染服务器返回的结果.

但是如果说前端设置的有重定向,

 {
    path: "/",
    redirect: "/home",
    component: () => import("@/views/home/Home"),
    hidden: true,
  }

那么就会将当前的url重定向到一个新的地址(比如说是:http://www.baidu.com/home),然后就会在前端匹配到相应的组件进行渲染,但是如果此时我们刷新一下页面.就会出现页面 404 问题

image.png

在前端路由模式中,采用history的时候会出现这个问题,原因是为什么呢?

如果我们在开发的时候是利用vue-cli直接创建的,那么这个问题是不会出现的,因为在vue-cli直接帮我们在webpack中已经配置好了.

如果是自己搭建的,没有在config.js里面去配置的话,就会出现这个问题,究其原因是因为vue中的historyApiFallback 如果我们没有配置,那么在使用history路由模式的时候,相当于我们直接去请求服务器上当前接口,如果服务器上并没有这个接口,那么就会报错(hash模式并不会有这个问题,因为hash #后不会被添加到url请求中)

如何配置

我们只需要在vue.config.js中配置代理转发的地方配置即可,可以最简单的配置为true 当在devServer中配置这一属性的时候,当后端路由没有命中,就会自动render index.html,这时候,vue-router就会生效,home页面就能出来啦。

{
    devServer:{      
        historyApiFallback: true
    }
}

或者可以自定义去配置,配置如下 rewrites是一个数组,里面通过提供一个对象,可以使用以下选项进一步控制此行为,historyApiFallback具体如何配置请点击此处

module.exports = {
  //...
  devServer: {
    disableDotRule: true, // 提供一个页面来替代404响应
    historyApiFallback: {
      rewrites: [
        { from: /^/$/, to: '/views/landing.html' },
        { from: /^/subpage/, to: '/views/subpage.html' },
        { from: /./, to: '/views/404.html' },
      ],
    },
  },
};

通过这样的配置就可以解决前端使用history路由模式刷新页面404问题

当然还可以通过nginx上面配置 只需要在 location 模块添加一行配置: try_files $uri $uri/ /index.html;

location / {
    index index.html;
    root /opt/data/ganss-vue;
    try_files $uri $uri/ /index.html;
    expires 30d;
}

记录到此为止...