原仓库 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 驱动的 uni-app 上使用基于文件的路由系统。
-
核心,提供基于文件的路由系统
-
为 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(),
],
};
});
名称 | 类型 | 是否可选 | 信息 |
---|---|---|---|
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>;
}