Vue3开发环境下Vue Router的history模式无法加载页面如何解决？

你当前使用的是 Vue 3 配套的 Vue Router 4.x 版本，该版本已经废弃了原有的 mode 配置项，改用指定 history 参数的方式来设置路由模式，你写的 mode: 'history' 属于 Vue Router 3.x 的旧用法，因此配置不生效导致页面加载异常。

第一步：修正路由配置代码 #

首先从vue-router中导入createWebHistory，替换原有的mode配置：

import { createRouter, createWebHistory } from 'vue-router'

const router = createRouter({
  history: createWebHistory(process.env.BASE_URL), // 替换原来的mode: 'history'配置
  routes
})

第二步：根据构建工具确认开发服务配置 #

• 如果你使用 Vue CLI 搭建项目：内置的webpack开发服务器默认已经开启了history模式的fallback支持，修正路由配置后重启npm run serve即可正常访问。
• 如果你使用 Vite 搭建项目：默认也支持history模式，如果仍出现404错误，可在vite.config.js中添加如下配置后重启服务：

export default {
  server: {
    historyApiFallback: true
  }
}

额外提示：如果你的项目后续需要部署在域名子目录下，需要将createWebHistory的入参改为对应的子目录路径，比如部署在https://example.com/admin/下，就填写createWebHistory('/admin/')。

内容的提问来源于stack exchange，提问作者Henrique Andrade