uniapp自动构建pages.json的vite插件

对于 uniapp 来说，配置 pages.json 无疑是最繁琐的事情，具有以下缺点：

• 冗长，页面很多时 pages 内容会很长
• 难找，有时候因为内容很长，导致页面配置比较难找，而且看起来比较凌乱
• json弊端，因为是 json 文件，配置项提示不友好，而且写注释会报错，也不能写额外的逻辑（比如动态配置等），强 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({
      // 主页面
      mainPage: 'src/pages/index/index'
    });
  ]
});

pages.config.ts 中配置

pages.config.ts 中的配置与官方 pages.json 的配置几乎一致，相当于仅仅从 json 文件改为了 ts 文件，但是可以忽略 pages 配置，因为会自动构建，除非你想自己配置，subPackages 配置可以仅仅配置 root，然后自动构建 pages。

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

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

defineUniPage 页面配置

在页面中可以使用 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>

通过配置 tsconfig.json 可以忽略页面的 defineUniPage 引入

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

配置说明

提供了三种配置方式：

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

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

插件配置项说明

配置项	类型	默认值	说明
root	string	–	项目根目录，默认自动获取当前根目录
entryDir	string	‘src/pages’	入口目录
mainPage	string	‘src/pages/index/index’	主页面路径
fileTypes	string[]	[‘vue’, ‘nvue’, ‘uvue’]	文件类型
ignore	string[]	[‘**/components/**’]	忽略路径
outputPath	string	‘src/pages.json’	输出路径
defaultPageConfig	PageConfig	{style: {navigationStyle: ‘custom’}}	默认页面配置

page.config.ts 配置项说明

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

仓库、资源、安装、反馈

仓库地址：https://gitee.com/jl15988/uni-auto-pages
npm 地址：https://www.npmjs.com/package/@jl15988/uni-auto-pages

可以执行一下代码安装测试（！！！注意，当前仅测试版本，仅供试用）

npm i @jl15988/uni-auto-pages

欢迎安装测试，并提出问题，可以在仓库提交 Issue，或者贡献代码，帮助我们完善此依赖，谢谢！