如何在 Vite 中配置路由？

前端的日常2025-08-02 9:32

在 Vite 中配置路由，特别是对于 Vue 和 React 项目，可以通过以下方法实现：

Vue 项目

对于 Vue 项目，可以使用 vite-plugin-pages 插件来自动读取指定目录中的 .vue 文件，并将其转换为 Vue Router 的路由表，从而省去手动维护路由配置的麻烦。例如，你可以在 vite.config.ts 中配置该插件：

typescript复制代码

php 复制代码

import Pages from 'vite-plugin-pages'
export default defineConfig({
  plugins: [
    vue(),
    Pages({
      dirs: 'src/pages',
      extensions: ['vue', 'ts'],
      importMode: 'async',
    }),
  ],
})

这样，插件会自动生成路由配置，你只需要在项目中使用即可。此外，它还支持路由懒加载、TypeScript 自动类型推导、变更页面文件自动热更新路由等功能，非常适合中大型 Vue 项目。

React 项目

对于 React 项目，可以使用 React Router 来配置路由。以下是使用 Vite 和 React Router 搭建现代化前端应用的基本步骤：

环境搭建 ：通过 npm create vite@latest my-app -- --template react 快速启动开发环境。
安装 React Router ：安装 React Router 的最新版本（v6.x）：npm install react-router-dom@6。
基础路由配置 ：在 src 目录下创建 App.tsx 文件，引入 React Router 的核心组件，并定义路由规则。
导航组件实现 ：创建 components 文件夹存放页面组件，并通过简单的组件拆分实现基础页面的导航功能。
链接组件跳转 ：在 Header 组件中添加导航链接，使用 <Link> 组件实现无刷新页面跳转，提升用户体验。

通过这些步骤，你可以在 Vite 中为 React 项目配置路由，实现现代化的前端应用开发。