vue-router中使用history模式时刷新页面无法正常渲染页面

问题描述

vue-router路由较为常见的模式有hash模式和history模式两种, 但是hash模式路径中带有#符号, 多少让人看着有点不爽, 个人多是用history模式比较多.
通常子路由配置如下所示, 正常访问路由都正常, 但是, 刷新页面时, 嵌套路由就崩了, 而且控制台报错一些乱七八糟的东西. 而且加载的静态文件都为 404 .

{
    path: '/home',
    name: 'Home',
    redirect: { name: 'Page1' },
    component: () => import('@/views/home/index'),
    meta: { title: 'home' },
    children: [
      {
        path: 'page1',
        name: 'Page1',
        component: () => import('@/views/home/page1'),
        meta: { title: 'page1' }
      }
    ]
  }

异常原因

因为在 vue.config.js 中配置了 publicPath: './', 导致在history模式下的根路径变为相对路径, 而导致引入的资源会根据该相对路径寻找资源当然找不到了.
而hash模式下, 或者配置 publicPath: '/' 根路径就是固定的 / 所以路径地址很明确了, 是正常的

解决方案

1. 使用路由的 hash 模式
2. 将 vue.config.js 配置中的 publicPath: '/' 设置为 / 或者其他部署项目的路径下, 例如 /h5, 不要设置为相对路径即可, 也可注释掉改配置, 默认就是 /

注意

• 上线部署的时候 history 模式也会出现这种问题, nginx配置处理可参考该文章 nginx启动vue项目刷新页面404