使用Vite-plugin-page配置Vue路由时404页面不生效，该如何解决？

• 把404.vue放在页面目录的根层级（比如src/pages/404.vue），不要嵌套在子文件夹里，避免插件扫描不到。
• 修改Vite配置文件，在插件配置中通过extendRoute手动添加通配符路由，确保捕获所有未匹配的路径：

import Pages from 'vite-plugin-pages'

export default {
  plugins: [
    Pages({
      // 保留你的其他配置
      extendRoute(route, parent) {
        if (!parent) {
          return {
            ...route,
            children: [
              ...(route.children || []),
              {
                path: '/:pathMatch(.*)*',
                name: 'NotFound',
                component: () => import('~/pages/404.vue'),
              },
            ],
          }
        }
        return route
      },
    }),
  ],
}

• 检查Vue Router实例，确保没有其他冲突的通配符路由，且404路由是所有路由中最后匹配的项（Router按顺序匹配，优先级从上到下）。
• 重启Vite开发服务，让插件重新扫描页面并生成新的路由配置，之后测试错误URL即可跳转到404页面。

如果你的vite-plugin-page版本较新，也可以尝试确认插件配置的extensions包含.vue，部分版本支持自动识别根目录下的404.vue作为NotFound页面，但手动添加extendRoute的方式兼容性更强。

内容的提问来源于stack exchange，提问作者amir tbi