vite-plugin-generoutes 1.1.0-beta.2 → 1.1.0-beta.4

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (4) hide show
  1. package/README.md +154 -130
  2. package/README.zh_CN.md +154 -130
  3. package/dist/index.js +13 -3
  4. package/package.json +1 -1
package/README.md CHANGED
@@ -1,130 +1,154 @@
1
- # vite-plugin-generoutes
2
-
3
- A Vite plugin that automatically generates Vue router configuration based on file system.
4
-
5
- ### ✨ Features
6
-
7
- - 📁 File-system based routing
8
- - 🔄 Dynamic and nested routes support
9
- - 🛠️ Hot reload - routes update when files change
10
- - 🎨 Customizable route configuration
11
- - 🧩 Support for route metadata via `defineOptions`
12
- - 🚦 Route redirection support
13
-
14
- ### 📦 Installation
15
-
16
- ```bash
17
- # npm
18
- npm install vite-plugin-generoutes -D
19
-
20
- # yarn
21
- yarn add vite-plugin-generoutes -D
22
-
23
- # pnpm
24
- pnpm add vite-plugin-generoutes -D
25
- ```
26
-
27
- ### 🔨 Usage
28
-
29
- Configure the plugin in your `vite.config.js`:
30
-
31
- ```javascript
32
- import vue from '@vitejs/plugin-vue'
33
- import { defineConfig } from 'vite'
34
- import generoutes from 'vite-plugin-generoutes'
35
-
36
- export default defineConfig({
37
- plugins: [
38
- vue(),
39
- generoutes({
40
- // options
41
- })
42
- ]
43
- })
44
- ```
45
-
46
- ### ⚙️ Configuration Options
47
-
48
- | Option | Type | Default | Description |
49
- | --------------- | ---------- | ------------------------ | ------------------------------------------------------- |
50
- | `pagesFolder` | `string` | `'src/pages'` | Path to pages folder |
51
- | `ignoreFolders` | `string[]` | `['components']` | Folders to ignore when generating routes |
52
- | `routesPath` | `string` | `'src/router/routes.js'` | Path to generated routes file, can also be a `.ts` file |
53
- | `nested` | `boolean` | `false` | Whether to generate nested routes |
54
-
55
- ### 📝 Routing Conventions
56
-
57
- #### Basic Routes
58
-
59
- - `src/pages/index.vue` -> `/`
60
- - `src/pages/about.vue` -> `/about`
61
- - `src/pages/users/index.vue` -> `/users`
62
- - `src/pages/users/profile.vue` -> `/users/profile`
63
-
64
- #### Dynamic Routes
65
-
66
- - `src/pages/users/[id].vue` -> `/users/:id`
67
- - `src/pages/users/[...all].vue` -> `/users/:pathMatch(.*)*`
68
- - `src/pages/[org]/[repo].vue` -> `/:org/:repo`
69
-
70
- #### Virtual Directories
71
-
72
- - Paths with parentheses in the filename are treated as virtual directories. The parenthesized part will be omitted in the generated route path.
73
- - For example: `src/pages/(auth)/login.vue` -> `/login`
74
-
75
- ### 🧠 Custom Routes
76
-
77
- You can use `defineOptions` in your Vue files to customize route configuration:
78
-
79
- ```vue
80
- <script setup>
81
- defineOptions({
82
- name: 'CustomRouteName',
83
- meta: {
84
- title: 'Page Title',
85
- icon: 'home',
86
- requiresAuth: true,
87
- enabled: true // Set to false to exclude this route
88
- },
89
- redirect: '/other-route' // Set redirection
90
- })
91
- </script>
92
- ```
93
-
94
- ### 🌲 Nested Routes
95
-
96
- With the `nested: true` option enabled, you can set nested route relationships using the `parent` property:
97
-
98
- ```vue
99
- <script setup>
100
- defineOptions({
101
- name: 'ChildRoute',
102
- parent: 'ParentRouteName',
103
- meta: {
104
- title: 'Child Route'
105
- }
106
- })
107
- </script>
108
- ```
109
-
110
- ### 🚀 Complete Example
111
-
112
- ```javascript
113
- import vue from '@vitejs/plugin-vue'
114
- import { defineConfig } from 'vite'
115
- import generoutes from 'vite-plugin-generoutes'
116
-
117
- export default defineConfig({
118
- plugins: [
119
- vue(),
120
- generoutes({
121
- pagesFolder: 'src/views',
122
- ignoreFolders: ['components', 'assets'],
123
- routesPath: 'src/router/routes.js',
124
- nested: true
125
- })
126
- ]
127
- })
128
- ```
129
-
130
- [中文文档](./README.zh_CN.md)
1
+ # vite-plugin-generoutes
2
+
3
+ A Vite plugin that automatically generates Vue router configuration based on file system.
4
+
5
+ ### ✨ Features
6
+
7
+ - 📁 File-system based routing
8
+ - 🔄 Dynamic and nested routes support
9
+ - 🛠️ Hot reload - routes update when files change
10
+ - 🎨 Customizable route configuration
11
+ - 🧩 Support for route metadata via `defineOptions`
12
+ - 🚦 Route redirection support
13
+
14
+ ### 📦 Installation
15
+
16
+ ```bash
17
+ # npm
18
+ npm install vite-plugin-generoutes -D
19
+
20
+ # yarn
21
+ yarn add vite-plugin-generoutes -D
22
+
23
+ # pnpm
24
+ pnpm add vite-plugin-generoutes -D
25
+ ```
26
+
27
+ ### 🔨 Usage
28
+
29
+ Configure the plugin in your `vite.config.js`:
30
+
31
+ ```javascript
32
+ import vue from '@vitejs/plugin-vue'
33
+ import { defineConfig } from 'vite'
34
+ import generoutes from 'vite-plugin-generoutes'
35
+
36
+ export default defineConfig({
37
+ plugins: [
38
+ vue(),
39
+ generoutes({
40
+ // options
41
+ })
42
+ ]
43
+ })
44
+ ```
45
+
46
+ ### ⚙️ Configuration Options
47
+
48
+ | Option | Type | Default | Description |
49
+ | --------------- | ---------- | ---------------- | ----------------------------------------------------------------------------------------------------------------- |
50
+ | `pagesFolder` | `string` | `'src/pages'` | Path to pages folder |
51
+ | `ignoreFolders` | `string[]` | `['components']` | Folders to ignore when generating routes |
52
+ | `routesPath` | `string` | Auto-detected | Path to generated routes file. Auto-detected based on `tsconfig.json` presence (`.ts` if exists, otherwise `.js`) |
53
+ | `nested` | `boolean` | `false` | Whether to generate nested routes |
54
+
55
+ ### 📘 TypeScript Support
56
+
57
+ This plugin has first-class TypeScript support:
58
+
59
+ - **Auto-detection**: Automatically detects TypeScript projects by checking for `tsconfig.json`
60
+ - **Type definitions**: When generating routes for TypeScript projects, the plugin automatically includes type definitions for `RouteMeta` and `GeneratedRoute`
61
+ - **Route typing**: Generated routes are properly typed with `RouteRecordRaw` from `vue-router`
62
+
63
+ ### 📝 Routing Conventions
64
+
65
+ #### Basic Routes
66
+
67
+ - `src/pages/index.vue` -> `/`
68
+ - `src/pages/about.vue` -> `/about`
69
+ - `src/pages/users/index.vue` -> `/users`
70
+ - `src/pages/users/profile.vue` -> `/users/profile`
71
+
72
+ #### Dynamic Routes
73
+
74
+ - `src/pages/users/[id].vue` -> `/users/:id`
75
+ - `src/pages/users/[...all].vue` -> `/users/:pathMatch(.*)*`
76
+ - `src/pages/[org]/[repo].vue` -> `/:org/:repo`
77
+
78
+ #### Virtual Directories
79
+
80
+ - Paths with parentheses in the filename are treated as virtual directories. The parenthesized part will be omitted in the generated route path.
81
+ - For example: `src/pages/(auth)/login.vue` -> `/login`
82
+
83
+ ### 🧠 Custom Routes
84
+
85
+ You can use `defineOptions` in your Vue files to customize route configuration:
86
+
87
+ ```vue
88
+ <script setup>
89
+ defineOptions({
90
+ name: 'CustomRouteName',
91
+ meta: {
92
+ title: 'Page Title',
93
+ icon: 'home',
94
+ requiresAuth: true,
95
+ enabled: true // Set to false to exclude this route
96
+ },
97
+ redirect: '/other-route' // Set redirection
98
+ })
99
+ </script>
100
+ ```
101
+
102
+ ### 🌲 Nested Routes
103
+
104
+ With the `nested: true` option enabled, you can set nested route relationships using the `parent` property:
105
+
106
+ ```vue
107
+ <script setup>
108
+ defineOptions({
109
+ name: 'ChildRoute',
110
+ parent: 'ParentRouteName',
111
+ meta: {
112
+ title: 'Child Route'
113
+ }
114
+ })
115
+ </script>
116
+ ```
117
+
118
+ ### 🚀 Complete Example
119
+
120
+ ```javascript
121
+ import vue from '@vitejs/plugin-vue'
122
+ import { defineConfig } from 'vite'
123
+ import generoutes from 'vite-plugin-generoutes'
124
+
125
+ export default defineConfig({
126
+ plugins: [
127
+ vue(),
128
+ generoutes({
129
+ pagesFolder: 'src/views',
130
+ ignoreFolders: ['components', 'assets'],
131
+ routesPath: 'src/router/routes.js',
132
+ nested: true
133
+ })
134
+ ]
135
+ })
136
+ ```
137
+
138
+ ### 💡 Troubleshooting
139
+
140
+ **Issue**: Route path shows error: *Cannot find module "/src/pages/xxx.vue" or its corresponding type declarations.* Unable to navigate to the file with F12.
141
+
142
+ **Solution**: Add the following configuration to the `compilerOptions` in your `jsconfig.json` or `tsconfig.json`:
143
+ ```json
144
+ {
145
+ "compilerOptions": {
146
+ "baseUrl": ".",
147
+ "paths": {
148
+ "/src/*": ["src/*"]
149
+ }
150
+ }
151
+ }
152
+ ```
153
+
154
+ [中文文档](./README.zh_CN.md)
package/README.zh_CN.md CHANGED
@@ -1,130 +1,154 @@
1
- # vite-plugin-generoutes
2
-
3
- 一个基于文件系统自动生成Vue路由配置的Vite插件。
4
-
5
- ### ✨ 特性
6
-
7
- - 📁 基于文件系统的路由生成
8
- - 🔄 支持动态路由和嵌套路由
9
- - 🛠️ 热重载 - 文件变化时自动更新路由
10
- - 🎨 可自定义路由配置
11
- - 🧩 支持通过`defineOptions`设置路由元数据
12
- - 🚦 支持路由重定向
13
-
14
- ### 📦 安装
15
-
16
- ```bash
17
- # npm
18
- npm install vite-plugin-generoutes -D
19
-
20
- # yarn
21
- yarn add vite-plugin-generoutes -D
22
-
23
- # pnpm
24
- pnpm add vite-plugin-generoutes -D
25
- ```
26
-
27
- ### 🔨 使用方法
28
-
29
- 在`vite.config.js`中配置插件：
30
-
31
- ```javascript
32
- import vue from '@vitejs/plugin-vue'
33
- import { defineConfig } from 'vite'
34
- import generoutes from 'vite-plugin-generoutes'
35
-
36
- export default defineConfig({
37
- plugins: [
38
- vue(),
39
- generoutes({
40
- // 配置选项
41
- })
42
- ]
43
- })
44
- ```
45
-
46
- ### ⚙️ 配置选项
47
-
48
- | 选项 | 类型 | 默认值 | 描述 |
49
- | --------------- | ---------- | ------------------------ | ------------------------------------- |
50
- | `pagesFolder` | `string` | `'src/pages'` | 页面文件夹路径 |
51
- | `ignoreFolders` | `string[]` | `['components']` | 生成路由时忽略的文件夹 |
52
- | `routesPath` | `string` | `'src/router/routes.js'` | 生成的路由文件路径，也可以是`.ts`文件 |
53
- | `nested` | `boolean` | `false` | 是否生成嵌套路由 |
54
-
55
- ### 📝 路由规则
56
-
57
- #### 基本路由
58
-
59
- - `src/pages/index.vue` -> `/`
60
- - `src/pages/about.vue` -> `/about`
61
- - `src/pages/users/index.vue` -> `/users`
62
- - `src/pages/users/profile.vue` -> `/users/profile`
63
-
64
- #### 动态路由
65
-
66
- - `src/pages/users/[id].vue` -> `/users/:id`
67
- - `src/pages/users/[...all].vue` -> `/users/:pathMatch(.*)*`
68
- - `src/pages/[org]/[repo].vue` -> `/:org/:repo`
69
-
70
- #### 虚拟目录
71
-
72
- - 文件名带括号的路径会被当做虚拟目录，生成的路由path会忽略带括号的这一层路径
73
- - 例如：`src/pages/(auth)/login.vue` -> `/login`
74
-
75
- ### 🧠 自定义路由
76
-
77
- 您可以在Vue文件中使用`defineOptions`来自定义路由配置：
78
-
79
- ```vue
80
- <script setup>
81
- defineOptions({
82
- name: 'CustomRouteName',
83
- meta: {
84
- title: '页面标题',
85
- icon: 'home',
86
- requiresAuth: true,
87
- enabled: true // 设置为false则不会生成此路由
88
- },
89
- redirect: '/other-route' // 设置重定向
90
- })
91
- </script>
92
- ```
93
-
94
- ### 🌲 嵌套路由
95
-
96
- 启用`nested: true`选项后，可以通过`parent`属性设置嵌套路由关系：
97
-
98
- ```vue
99
- <script setup>
100
- defineOptions({
101
- name: 'ChildRoute',
102
- parent: 'ParentRouteName',
103
- meta: {
104
- title: '子路由'
105
- }
106
- })
107
- </script>
108
- ```
109
-
110
- ### 🚀 完整示例
111
-
112
- ```javascript
113
- import vue from '@vitejs/plugin-vue'
114
- import { defineConfig } from 'vite'
115
- import generoutes from 'vite-plugin-generoutes'
116
-
117
- export default defineConfig({
118
- plugins: [
119
- vue(),
120
- generoutes({
121
- pagesFolder: 'src/views',
122
- ignoreFolders: ['components', 'assets'],
123
- routesPath: 'src/router/routes.js',
124
- nested: true
125
- })
126
- ]
127
- })
128
- ```
129
-
130
- [English Documentation](./README.md)
1
+ # vite-plugin-generoutes
2
+
3
+ 一个基于文件系统自动生成Vue路由配置的Vite插件。
4
+
5
+ ### ✨ 特性
6
+
7
+ - 📁 基于文件系统的路由生成
8
+ - 🔄 支持动态路由和嵌套路由
9
+ - 🛠️ 热重载 - 文件变化时自动更新路由
10
+ - 🎨 可自定义路由配置
11
+ - 🧩 支持通过`defineOptions`设置路由元数据
12
+ - 🚦 支持路由重定向
13
+
14
+ ### 📦 安装
15
+
16
+ ```bash
17
+ # npm
18
+ npm install vite-plugin-generoutes -D
19
+
20
+ # yarn
21
+ yarn add vite-plugin-generoutes -D
22
+
23
+ # pnpm
24
+ pnpm add vite-plugin-generoutes -D
25
+ ```
26
+
27
+ ### 🔨 使用方法
28
+
29
+ 在`vite.config.js`中配置插件：
30
+
31
+ ```javascript
32
+ import vue from '@vitejs/plugin-vue'
33
+ import { defineConfig } from 'vite'
34
+ import generoutes from 'vite-plugin-generoutes'
35
+
36
+ export default defineConfig({
37
+ plugins: [
38
+ vue(),
39
+ generoutes({
40
+ // 配置选项
41
+ })
42
+ ]
43
+ })
44
+ ```
45
+
46
+ ### ⚙️ 配置选项
47
+
48
+ | 选项 | 类型 | 默认值 | 描述 |
49
+ | --------------- | ---------- | ---------------- | ----------------------------------------------------------------------------------------- |
50
+ | `pagesFolder` | `string` | `'src/pages'` | 页面文件夹路径 |
51
+ | `ignoreFolders` | `string[]` | `['components']` | 生成路由时忽略的文件夹 |
52
+ | `routesPath` | `string` | 自动检测 | 生成的路由文件路径，根据 `tsconfig.json` 是否存在自动检测（存在则为 `.ts`，否则为 `.js`） |
53
+ | `nested` | `boolean` | `false` | 是否生成嵌套路由 |
54
+
55
+ ### 📘 TypeScript 支持
56
+
57
+ 本插件对 TypeScript 提供一流支持：
58
+
59
+ - **自动检测**：通过检查 `tsconfig.json` 自动检测 TypeScript 项目
60
+ - **类型定义**：为 TypeScript 项目生成路由时，插件会自动包含 `RouteMeta` 和 `GeneratedRoute` 的类型定义
61
+ - **路由类型**：生成的路由使用 `vue-router` 的 `RouteRecordRaw` 进行正确的类型标注
62
+
63
+ ### 📝 路由规则
64
+
65
+ #### 基本路由
66
+
67
+ - `src/pages/index.vue` -> `/`
68
+ - `src/pages/about.vue` -> `/about`
69
+ - `src/pages/users/index.vue` -> `/users`
70
+ - `src/pages/users/profile.vue` -> `/users/profile`
71
+
72
+ #### 动态路由
73
+
74
+ - `src/pages/users/[id].vue` -> `/users/:id`
75
+ - `src/pages/users/[...all].vue` -> `/users/:pathMatch(.*)*`
76
+ - `src/pages/[org]/[repo].vue` -> `/:org/:repo`
77
+
78
+ #### 虚拟目录
79
+
80
+ - 文件名带括号的路径会被当做虚拟目录，生成的路由path会忽略带括号的这一层路径
81
+ - 例如：`src/pages/(auth)/login.vue` -> `/login`
82
+
83
+ ### 🧠 自定义路由
84
+
85
+ 您可以在Vue文件中使用`defineOptions`来自定义路由配置：
86
+
87
+ ```vue
88
+ <script setup>
89
+ defineOptions({
90
+ name: 'CustomRouteName',
91
+ meta: {
92
+ title: '页面标题',
93
+ icon: 'home',
94
+ requiresAuth: true,
95
+ enabled: true // 设置为false则不会生成此路由
96
+ },
97
+ redirect: '/other-route' // 设置重定向
98
+ })
99
+ </script>
100
+ ```
101
+
102
+ ### 🌲 嵌套路由
103
+
104
+ 启用`nested: true`选项后，可以通过`parent`属性设置嵌套路由关系：
105
+
106
+ ```vue
107
+ <script setup>
108
+ defineOptions({
109
+ name: 'ChildRoute',
110
+ parent: 'ParentRouteName',
111
+ meta: {
112
+ title: '子路由'
113
+ }
114
+ })
115
+ </script>
116
+ ```
117
+
118
+ ### 🚀 完整示例
119
+
120
+ ```javascript
121
+ import vue from '@vitejs/plugin-vue'
122
+ import { defineConfig } from 'vite'
123
+ import generoutes from 'vite-plugin-generoutes'
124
+
125
+ export default defineConfig({
126
+ plugins: [
127
+ vue(),
128
+ generoutes({
129
+ pagesFolder: 'src/views',
130
+ ignoreFolders: ['components', 'assets'],
131
+ routesPath: 'src/router/routes.js',
132
+ nested: true
133
+ })
134
+ ],
135
+ })
136
+ ```
137
+
138
+ ### 💡 常见问题
139
+
140
+ 1、路由的path报红：*找不到模块“/src/pages/xxx.vue”或其相应的类型声明。*，按F12无法跳转至对应的文件
141
+
142
+ 解决方法：在 jsconfig.json 或者 tsconfig.json 的 compilerOptions中添加如下配置
143
+ ```json
144
+ {
145
+ "compilerOptions": {
146
+ "baseUrl": ".",
147
+ "paths": {
148
+ "/src/*": ["src/*"]
149
+ }
150
+ }
151
+ }
152
+ ```
153
+
154
+ [English Documentation](./README.md)
package/dist/index.js CHANGED
@@ -113,12 +113,22 @@ import type { RouteRecordRaw } from 'vue-router'
113
113
  * Route meta information
114
114
  */
115
115
  export interface RouteMeta {
116
- /** Route title */
116
+ /** Page title */
117
117
  title?: string
118
- /** Route icon */
118
+ /** Page icon */
119
119
  icon?: string
120
+ /** Page code */
121
+ code?: string
122
+ /** Page layout */
123
+ layout?: string
120
124
  /** Whether authentication is required */
121
- requiresAuth?: boolean
125
+ requireAuth?: boolean
126
+ /** Whether to keep alive */
127
+ keepAlive?: boolean
128
+ /** Whether it's the home page */
129
+ isHome?: boolean
130
+ /** Whether it's a login page */
131
+ isLogin?: boolean
122
132
  /** Custom properties */
123
133
  [key: string]: unknown
124
134
  }
package/package.json CHANGED
@@ -1,7 +1,7 @@
1
1
  {
2
2
  "name": "vite-plugin-generoutes",
3
3
  "type": "module",
4
- "version": "1.1.0-beta.2",
4
+ "version": "1.1.0-beta.4",
5
5
  "packageManager": "pnpm@10.6.2",
6
6
  "description": "A Vite plugin that generate routes based on the file structure, supports dynamic routes, and supports custom meta data for each route.",
7
7
  "author": "Ronnie Zhang <zclzone@outlook.com>",