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

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

  • 冗长,页面很多时 pages 内容会很长
  • 难找,有时候因为内容很长,导致页面配置比较难找,而且看起来比较凌乱
  • json弊端,因为是 json 文件,配置项提示不友好,而且写注释会报错,也不能写额外的逻辑(比如动态配置等),强 json 格式(键必须有双引号)

于是,我找出了一个优雅的解决方案,请看示例:

vite.config.ts 中配置

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。

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 页面配置

在页面中可以使用 defineUniPage 来对当前页面单独配置

ts 复制代码
<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 引入

json 复制代码
{
  "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

可以执行一下代码安装测试(!!!注意,当前仅测试版本,仅供试用)

shell 复制代码
npm i @jl15988/uni-auto-pages

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

相关推荐
肖魏眸2 分钟前
vue3 格式化 : antfu 组合 prettier & eslint & 提交格式化校验
前端·代码规范
婉婉耶2 分钟前
VUE带你乘风破浪~
前端·vue.js
橘黄的猫2 分钟前
深入浅出掌握 Git 子模块:项目管理利器
前端·github
大厂内参PRO3 分钟前
不止于补全,智能ai助手计稿一键转代码+规则管理,解锁编程新姿势
前端
小赖同学啊15 分钟前
光伏园区3d系统管理
前端·javascript·3d
木叶丸22 分钟前
编程开发中,那些你必须掌握的基本概念
前端·数据结构·编程语言
前端进阶者23 分钟前
js通知提醒
前端·javascript
拖孩28 分钟前
微信群太多,管理麻烦?那试试接入AI助手吧~
前端·后端·微信
乌兰麦朵1 小时前
Vue吹的颅内高潮,全靠选择性失明和 .value 的PUA!
前端·vue.js
Code季风1 小时前
Gin Web 层集成 Viper 配置文件和 Zap 日志文件指南(下)
前端·微服务·架构·go·gin