安装

本节介绍如何在uni-app项目中安装@wot-ui/router和路由表生成插件@uni-helper/vite-plugin-uni-pages。

TIP

推荐使用wot-starter作为参考，已经集成了@wot-ui/router和@uni-helper/vite-plugin-uni-pages，可以直接使用，无需关心本章节配置。

安装路由包

pnpm

pnpm add @wot-ui/router

npm

npm i @wot-ui/router --save

yarn

yarn add @wot-ui/router

安装路由表生成插件

本项目使用@uni-helper/vite-plugin-uni-pages插件来自动生成路由表，该插件会读取pages.json文件并生成路由信息，通过virtual:uni-pages虚拟模块供应用使用。

npm

npm i @uni-helper/vite-plugin-uni-pages --save-dev

yarn

yarn add @uni-helper/vite-plugin-uni-pages -D

pnpm

pnpm add @uni-helper/vite-plugin-uni-pages -D

配置路由表生成插件

在vite.config.ts中配置@uni-helper/vite-plugin-uni-pages插件：

// vite.config.ts
import { defineConfig } from 'vite'
import UniHelperPages from '@uni-helper/vite-plugin-uni-pages'
import uni from '@dcloudio/vite-plugin-uni'

// https://vitejs.dev/config/
export default defineConfig({
  plugins: [
    UniHelperPages({
      dts: 'src/uni-pages.d.ts',
      subPackages: [
        'src/subPages',
        // 可以添加更多子包目录
      ],
      /**
       * 排除的页面，相对于 dir 和 subPackages
       * @default []
       */
      exclude: ['**/components/**/*'],
    }),
    uni(),
    // 其他插件...
  ],
  // 其他配置...
})