做网站的一些费用河北伟创网络技术有限公司
对于 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.jsonstyle: {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，或者贡献代码，帮助我们完善此依赖，谢谢！