如何设置 `vite-plugin-pages`，找不到模块 `~pages`

Question

我正在尝试在 vite-plugin-pages 的帮助下使用 Vite 为 Vue 3 应用程序设置基于文件系统的路由。

我使用 yarn create vite 创建项目，将 vue-ts 作为选项，并通过 yarn add vite-plugin-pages --dev、yarn add vue-router.

添加插件

根据 github 上的自述文件，我在 vite.config.ts 中添加了以下内容：

import Pages from 'vite-plugin-pages'

export default {
  plugins: [
    // ...
    Pages(),
  ],
}

然而，在下一步中，在 main.ts:

import { createRouter } from 'vue-router'
import routes from '~pages'

const router = createRouter({
  // ...
  routes,
})

我似乎无法从 ~pages 导入。我找不到模块。 vue-router 本身工作正常，因为我可以很好地创建路由器，自己声明 routes。在 vite template 中，他们似乎正在使用 import routes from 'virtual:generated-pages' 而我不知道它们是如何工作的。

所以，问题是，我将如何生成动态路由并作为一个整体，设置 vite-plugin-pages 的用法？

Answer 1

你可以这样试试：

import Pages from "vite-plugin-pages" 

export default defineConfig({ 
    plugins: [ 
        Pages({
            pagesDir: [
                {dir: 'src/pages', baseRoute: ''},
            ],
            extensions: ['vue'],
            syncIndex: true,
            replaceSquareBrackets: true,
            extendRoute(route) {
                if (route.name === 'about')
                    route.props = route => ({query: route.query.q})

                if (route.name === 'components') {
                    return {
                        ...route,
                        beforeEnter: (route) => {
                            // eslint-disable-next-line no-console
                            // console.log(route)
                        },
                    }
                }
            },
        }), 
    ],
});

然后在main.js

import { createRouter, createWebHistory } from 'vue-router';
import generatedRoutes from 'virtual:generated-pages'; 

const router = createRouter({
  history: createWebHistory(),
  routes: generatedRoutes,
});

Answer 2

// tsconfig.json
"compilerOptions": {
    ...
    "types":  ["vite-plugin-pages/client"]
}

如何设置 `vite-plugin-pages`，找不到模块 `~pages`

How to setup `vite-plugin-pages`, cannot find module `~pages`

vue.js

vue-router

vuejs3

vite