前言

vite-plugin-pages是一个能够快速根据文件系统生成路由的插件，在使用vite搭建项目时配置也非常简单。在熟悉了这种文件式路由后，在平时开发过程中也能够通过页面路由快速定位问题或者进行代码改动，可以说是非常方便了。

搭建Vite项目安装vite-plugin-pages

pnpm install -g vite
vite create my-react-app --template react-ts
pnpm install react-router-dom
pnpm install vite-plugin-pages

路由文件规则

默认路由索引: 以index命名的文件会默认为当前路由的索引页，而文件夹不会生成路由

• src/pages/users/index.tsx
• src/pages/users/index.tsx -> src/pages/users/id.tsx 同级路由

配置vite-plugin-pages

import { defineConfig } from "vite";
import react from "@vitejs/plugin-react-swc";
import Pages from "vite-plugin-pages";
import {resolve} from 'path'
import type { ConfigEnv, UserConfig } from "vite";
export default defineConfig(({ mode }: ConfigEnv): UserConfig => {
  return {
    envDir: "env",
    plugins: [
      react(),
      Pages({
        dirs: 'src/pages', // 自定义需要生成路由的文件目录，默认为src下的pages文件
        extensions: ["tsx"], // 生成路由的拓展名，如['tsx', 'jsx', 'ts', 'js']
        routeStyle: "next",
        exclude: ["**/components/**/*", "**/controller.tsx", "**/demo/**/*"], // 配置不生成路由的文件目录
        importMode: "async", // 页面组件的导入方式，可以是“同步”、“异步”或者函数，(filepath: string)
        // importMode(path) { // return path.includes('syx') ? 'async' : 'sync'  },
      }),
    ],
    resolve: {
      alias: [
        { find: /^~/, replacement: '' },
        { find: '@', replacement: resolve(__dirname, './src') }
      ]
    },
  };
});

// App挂载路由
import { Suspense } from "react";
import { RouterProvider, createBrowserRouter } from "react-router-dom";
import routes from "virtual:generated-pages-react";

function App() {
  const router = createBrowserRouter(routes);
  return (
      <Suspense>
        <RouterProvider router={router} />
      </Suspense>
  );
}

export default App;

配置一个404页面，在src/pages目录下新建一个[.all].tsx文件，当让访问路由失败时跳转到该页面 最后目录结构如下：

看看页面

一个基本的文件式路由就搭建起来了，更多配置可查看：vite-plugin-pages