如何设置“`vite plugin-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模板中，他们似乎在使用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

您还可以在任何类型声明中声明引用。

/// <reference types="vite-plugin-pages/client" />

Answer 3

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