怎么使用vite自动生成路由——vite-plugin-pages

简单介绍

vite-plugin-pages 是一个为 Vite 打造的插件，旨在自动化 Vue 和 React 项目中的路由处理。这个插件通过文件系统的结构自动生成路由，大大简化了路由配置的复杂性，使开发者能够更加专注于页面本身的开发，而不是路由的手动配置。以下是 vite-plugin-pages 的一些主要特性和功能：

自动生成路由

• 基于文件系统的路由：vite-plugin-pages 会自动根据项目中的文件和目录结构生成路由配置。例如，在 Vue 应用中，你只需要在 src/pages 目录下添加 .vue 文件，vite-plugin-pages 就会为每个文件创建一个路由。

动态路由

• 支持动态路由：通过文件名和目录名的约定，你可以很容易地创建动态路由。例如，一个文件名为 [id].vue 的文件将会被转换成一个动态路由，如 /users/:id。

嵌套路由

• 自动处理嵌套路由：通过目录结构，你可以简单地创建嵌套路由。目录树的层级会被转换成路由的嵌套。

支持多种框架和特性

• Vue 和 React 支持：尽管最初主要用于 Vue 应用，vite-plugin-pages 也可以配置用于 React 项目，让 React 用户也能享受到类似的路由自动生成体验。

• 支持异步路由：可以配置加载页面组件时的异步行为，优化首屏加载时间。

• 自定义路由扩展：允许开发者通过配置文件或约定来自定义路由属性，例如路由的元数据（meta）。

开发体验优化

• 热模块替换（HMR）：与 Vite 的热更新特性完美结合，当你修改页面或添加新页面时，路由会自动更新，无需手动刷新浏览器。

• 支持 TypeScript：vite-plugin-pages 支持 TypeScript，使得在使用 TypeScript 的项目中也能平滑集成。

使用场景

• 单页应用（SPA）：非常适合构建单页应用，自动化路由生成可以极大地提高开发效率。

• 多页应用（MPA）：也可以配置用于多页应用，每个页面作为一个入口。

vite-plugin-pages 通过减少手动路由配置的需要，简化了开发流程，提高了开发效率，是使用 Vite 开发 Vue 或 React 应用时的一个有用插件。

怎么使用

安装

npm install vite-plugin-pages --save-dev
或
yarn add vite-plugin-pages --dev

vite.config.js

import { defineConfig } from 'vite';
import vue from '@vitejs/plugin-vue';
import Pages from 'vite-plugin-pages'; // 引入vite-plugin-pages
import Layouts from 'vite-plugin-vue-layouts';

export default defineConfig({
  plugins: [
    vue(),
    Pages(), // 调用 Pages()
    Layouts(),
  ],
});

 使用

接下来，在 src/pages 目录下添加 .vue 文件，vite-plugin-pages 就会创建对应的路由。

如：
src/pages/users.vue => localhost/users
src/pages/users/[id].vue => localhost/users/:id