vue3使用h5 history模式的路由模式，刷新页面找不到资源问题

问题描述

vue-router中配置history为createWebHistory() 后，当刷新页面会出现无法找到资源的问题

配置如下：

 // router/index.ts
const router = createRouter({
  history: createWebHistory(),
  routes
})

请求一个存在的路由后发生404错误

知识补充

• 在使用vue-router的时候需要指定history配置项，此值表示路由的模式；
• 常用的方式有hash 以及h5的history 的方式
• hash与hash两者的区别：hash在请求路径中会携带有#xxx，这种请求路径不好看；history的话就不会携带有#xxx，这种路径符合平常看到的网页路径

解决办法

需要开启webpack中 devServer关于h5的history api 的配置。
步骤如下：

• 在vue.config.js中新增如下配置，然后重新启动npm run serve

module.exports = {
  ...
  configureWebpack: {
    devServer: {
      historyApiFallback: true
    },
  }
}