@uni-helper/vite-plugin-uni-pages

File system-based routing for uni-app applications using Vite.

English | 简体中文

Installation

1pnpm i -D @uni-helper/vite-plugin-uni-pages

Usage

1// vite.config.ts
2import { defineConfig } from 'vite'
3import Uni from '@dcloudio/vite-plugin-uni'
4import UniPages from '@uni-helper/vite-plugin-uni-pages'
5
6// It is recommended to put it in front of Uni
7export default defineConfig({
8  plugins: [UniPages(), Uni()],
9})

Define global properties in pages.config.(ts|mts|cts|js|cjs|mjs|json), You can use like #ifdef H5 in the file.

1// pages.config.ts
2import { defineUniPages } from '@uni-helper/vite-plugin-uni-pages'
3
4export default defineUniPages({
5  // You can also define pages fields, which have the highest priority.priority.
6  pages: [],
7  globalStyle: {
8    navigationBarTextStyle: 'black',
9    navigationBarTitleText: '@uni-helper',
10  },
11})

Now all pages will be found automatically!

SFC custom block for Route Data

Add route meta to the route by adding a <route> block to the SFC. This will be directly added to the route after it is generated, and will override it.

You can specify a parser to use using <route lang="yaml">, or set a default parser using routeBlockLang option.

• Supported parser: JSON, JSON5, YAML
• Default: JSON5

1<!-- index.vue -->
2<!-- use type to set index -->
3<route type="home">
4{
5  "style": { "navigationBarTitleText": "@uni-helper" }
6}
7</route>
8
9<!-- other.vue -->
10<route lang="yaml">
11style:
12  navigationBarTitleText: "@uni-helper"
13</route>

Import the virtual module to access the metadata of all pages

1/// <reference types="@uni-helper/vite-plugin-uni-pages/client" />
2import { pages } from 'virtual:uni-pages'
3
4console.log(pages)

Configuration

1export interface Options {
2  /**
3   * Whether to scan and merge pages in pages.json
4   * @default true
5   */
6  mergePages: boolean
7
8  /**
9   * Paths to the directory to search for page components.
10   * @default 'src/pages'
11   */
12  dir: string
13
14  /**
15   * pages.json dir
16   * @default "src"
17   */
18  outDir: string
19
20  /**
21   * exclude page
22   * @default []
23   */
24  exclude: string[]
25
26  /**
27   * Set the default route block parser, or use `<route lang="xxx">` in SFC route block
28   * @default 'json5'
29   */
30  routeBlockLang: 'json5' | 'json' | 'yaml' | 'yml'
31
32  onBeforeLoadUserConfig: (ctx: PageContext) => void
33  onAfterLoadUserConfig: (ctx: PageContext) => void
34  onBeforeScanPages: (ctx: PageContext) => void
35  onAfterScanPages: (ctx: PageContext) => void
36  onBeforeMergePageMetaData: (ctx: PageContext) => void
37  onAfterMergePageMetaData: (ctx: PageContext) => void
38  onBeforeWriteFile: (ctx: PageContext) => void
39  onAfterWriteFile: (ctx: PageContext) => void
40}

Acknowledgement

• vite-plugin-pages