Uni Auto Pages

当前版本为测试版本，仅供测试、试用，切勿在生产使用

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

特性

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

安装

npm install uni-auto-page --save-dev

或者使用 yarn：

yarn add uni-auto-page -D

使用方法

1. 在 Vite 配置中引入插件

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

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

2. 创建配置文件

在项目根目录下创建 auto.pages.config.ts 文件：

// auto.pages.config.ts
import { AutoPagesConfig } from 'uni-auto-page';

const config: AutoPagesConfig = {
  entryDir: 'src/pages',
  fileTypes: ['vue', 'nvue', 'uvue'],
  ignore: [],
  outputPath: 'pages.json',
  defaultPageConfig: {
    style: {
      navigationStyle: 'custom'
    }
  },
  pages: [],
  subPackages: [],
  other: {
    globalStyle: {
      navigationBarTextStyle: 'black',
      navigationBarTitleText: '',
      navigationBarBackgroundColor: '#F8F8F8',
      backgroundColor: '#F8F8F8',
    },
  },
  // 其他配置项...
};

export default config;

3. 在页面中使用 defineOptions 配置页面

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

<script lang="ts" setup>
// 使用 defineOptions 配置页面
defineOptions({
  // 页面配置，会在构建时被提取并写入 pages.json
  uniPage: {
    style: {
      navigationBarTitleText: '示例页面',
      navigationBarBackgroundColor: '#007AFF',
      navigationBarTextStyle: 'white',
      enablePullDownRefresh: true,
    }
  },
  
  // 其他非页面配置
  name: 'ExamplePage',
});
</script>