原仓库 https://github.com/uni-helper/vite-plugin-uni-pages
原仓库使用如下方式描述路由信息:

<route type="home" lang="json">
{
  "style": { "navigationBarTitleText": "@uni-helper" }
}
</route>

本仓库弃用了内置 <route/> 描述源信息, 改多个独立文件描述源信息:

├── App.vue
├── main.ts
├── manifest.json
├── pages
│   ├── about
│   │   ├── index.vue
│   │   └── meta.ts // 使用同级别文件描述信息
│   └── index
│       ├── index.vue
│       └── meta.ts // 使用同级别文件描述信息
├── pages.config.ts
└── pages.json // 自动生成 pages.json

vite-plugin-uni-pages

在 Vite 驱动的 uni-app 上使用基于文件的路由系统。

Packages

• vite-plugin-uni-pages

  核心，提供基于文件的路由系统

• pages-json-schema

  为 uni-app 的 pages.json 提供 schema

• 弃用内置 <route/> 描述源信息, 改为页面同级独立文件描述源信息

安装

pnpm i -D vite-plugin-uni-pages

额外功能

使用 presetPageMeta 预设

// vite.config.ts
import Uni from "@dcloudio/vite-plugin-uni";
import { defineConfig } from "vite";
import UniPages, { presetPageMeta } from "vite-plugin-uni-pages";
export default defineConfig(() => {
  return {
    plugins: [
      UniPages(
        presetPageMeta({
          showLog: true,
          mergePages: true,
          configSource: (resolve) => resolve("pages.config.ts"),
          dts: "types/page.d.ts",
        })
      ),
      Uni(),
    ],
  };
});

presetPageMeta 额外参数

名称	类型	是否可选	信息
configSource	(resolve:(file:string=>string))=>string	可选	默认为 pages.config.ts 可设为其他
metaFileName	string	可选	meta 文件名，默认为 meta.ts
showLog	boolean	可选	是否开启编译日志

在 pages.config.ts 定义全局属性

// pages.config.ts
import { defineUniPages } from "vite-plugin-uni-pages";

export default defineUniPages({
  // 你也可以定义 pages 字段，它具有最高的优先级。
  pages: [],
  globalStyle: {
    navigationBarTextStyle: "black",
    navigationBarTitleText: "@uni-helper",
  },
});

现在所有的 page 都会被自动发现！

自定义路由数据

meta 配置文件

//  页面同级 pages/xxx/meta.ts

import { definePageMeta } from "vite-plugin-uni-pages";
export default definePageMeta({
  style: {
    navigationBarTitleText: "页面名称",
    navigationBarBackgroundColor: "#ff00ff",
  },
});

虚拟模块访问所有路由数据

/// <reference types="@uni-helper/vite-plugin-uni-pages/client" />
import { pages } from "virtual:uni-pages";

console.log(pages);

配置

export interface Options {
  /**
   * 为页面路径生成 TypeScript 声明
   *
   * 接受布尔值或与相对项目根目录的路径
   *
   * 默认为 uni-pages.d.ts
   *
   * @default true
   */
  dts?: boolean | string;

  /**
   * 配置文件
   * @default 'pages.config.(ts|mts|cts|js|cjs|mjs|json)',
   */
  configSource: ConfigSource;

  /**
   * 设置默认路由入口
   * @default 'pages/index' || 'pages/index/index'
   */
  homePage: string;

  /**
   * 是否扫描并合并 pages.json 中 pages 字段
   * @default true
   */
  mergePages: boolean;

  /**
   * 扫描的目录
   * @default 'src/pages'
   */
  dir: string;

  /**
   * subPackages 扫描的目录，例如：src/pages-sub
   */
  subPackages: string[];

  /**
   * 输出 pages.json 目录
   * @default "src"
   */
  outDir: string;

  /**
   * 排除的页面
   * @default []
   */
  exclude: string[];

  /**
   * 自定义块语言
   * @default 'json5'
   */
  routeBlockLang: "json5" | "json" | "yaml" | "yml";

  onBeforeLoadUserConfig: (ctx: PageContext) => Promise<void>;
  onAfterLoadUserConfig: (ctx: PageContext) => Promise<void>;
  onBeforeScanPages: (ctx: PageContext) => Promise<void>;
  onAfterScanPages: (ctx: PageContext) => Promise<void>;
  onBeforeMergePageMetaData: (ctx: PageContext) => Promise<void>;
  onAfterMergePageMetaData: (ctx: PageContext) => Promise<void>;
  onBeforeWriteFile: (ctx: PageContext) => Promise<void>;
  onAfterWriteFile: (ctx: PageContext) => Promise<void>;
}

感谢

• vite-plugin-pages