Uni Auto Pages

一个用于 UniApp 项目的插件，可以根据项目目录结构自动构建 pages.json 文件。

特性

• 🚀 自动扫描目录结构，生成 pages.json
• 📝 支持通过 defineUniPage 在页面文件中直接配置页面属性
• 📦 支持分包配置
• 🎨 支持根据路径匹配应用不同的样式
• 🧩 支持忽略路径配置，使用 glob 模式匹配，类似于 .gitignore
• 🔄 支持热更新，修改配置文件或页面文件后自动重新生成 pages.json
• 📚 支持完整的 TypeScript 类型提示

安装

npm install @jl15988/uni-auto-pages --save-dev

或者使用 yarn：

yarn add @jl15988/uni-auto-page -D

使用方法

1. 在 Vite 配置中引入插件

// vite.config.ts
import { defineConfig } from 'vite';
import uni from '@dcloudio/vite-plugin-uni';
import uniAutoPages from '@jl15988/uni-auto-pages';

export default defineConfig({
  plugins: [
    uniAutoPages(),
    uni(),
  ],
});

2. 配置

提供了三种配置方式：

• 直接在 vite.config.ts 中配置
• 在 pages.config.ts 中配置
• 在页面中使用 defineUniPage 配置页面

优先级：页面配置 > pages.config.ts 配置 > vite.config.ts 配置

插件配置项说明

| 配置项 | 类型 | 默认值 | 说明 | | ----------------- | ---------- | ------------------------------------ | ---------------------------------- | | root | string | -- | 项目根目录，默认自动获取当前根目录 | | entryDir | string | 'src' | 入口目录 | | mainDir | string | 'pages' | 主包入口（相对于入口目录） | | mainPage | string | 'pages/index/index' | 主页面路径 | | fileTypes | string[] | ['vue', 'nvue', 'uvue'] | 文件类型 | | ignore | string[] | ['**/components/**'] | 忽略路径 | | outputPath | string | 'src/pages.json' | 输出路径 | | generateTypes | boolean | false | 生成 pages 类型文件 | | typesOutputPath | string | src/uni-pages.d.ts | pages 类型文件输出路径 | | defaultPageConfig | PageConfig | {style: {navigationStyle: 'custom'}} | 默认页面配置 |

page.config.ts 配置项说明

| 配置项 | 类型 | 默认值 | 说明 | | ------------------------------- | ------------------------------------------------------------ | ------ | ------------------------------------------------------------ | | pages | PagesOptionsPage[] | [] | 页面配置，可选，会自动构建，用于自定义页面配置 | | subPackages | SubPackagesOptions[] | [] | 分包配置，可选，可以仅配置 root，会自动扫描，也可以自定义指定页面配置 | | 其他，如 globalStyle、tabBar 等 | uniapp pages.json，具体参照官方 pages 说明，或参考：pages.d.ts、pages.ts | -- | pages.json 配置，与官方 pages.json 一致 |

vite.config.ts 中配置

// vite.config.ts
import { defineConfig } from 'vite';
import uni from '@dcloudio/vite-plugin-uni';
import uniAutoPages from '@jl15988/uni-auto-pages';
export default defineConfig({
  plugins: [
    uniAutoPages({
      entryDir: 'src/pages',
      fileTypes: ['vue', 'nvue', 'uvue'],
      ignore: [],
      outputPath: 'src/pages.json',
      defaultPageConfig: {
        style: {
            navigationStyle: 'custom'
        }
      }
    })
  ]
});

pages.config.ts 中配置

// pages.config.ts
import {defineAutoPagesConfig} from "@jl15988/uni-auto-pages";

export default defineAutoPagesConfig({
  pages: [],
  subPackages: [],
  globalStyle: {
    navigationBarTextStyle: 'black',
    navigationBarTitleText: '',
    navigationBarBackgroundColor: '#F8F8F8',
    backgroundColor: '#F8F8F8',
  },
  // 其他配置项...
});

在页面中使用 defineUniPage 配置页面

<template>
  <view>页面内容</view>
</template>

<script lang="ts" setup>
import { defineUniPage } from "@jl15988/uni-auto-pages";
  
defineUniPage({
  // 页面配置，会在构建时被提取并写入 pages.json
  style: {
    navigationBarTitleText: '示例页面',
    navigationBarBackgroundColor: '#007AFF',
    navigationBarTextStyle: 'white',
    enablePullDownRefresh: true,
  }
});
</script>

如果你不想在页面中引入 defineUniPage，而直接使用 defineUniPage，你可以在 tsconfig.json 中添加以下配置：

{
  "compilerOptions": {
    "types": ["@jl15988/uni-auto-pages"]
  }
}