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

Question

我正在尝试在的帮助下，使用VITE设置基于文件系统的路由。 vite-plugin-pages 。

我使用YARN创建了项目，用vue-ts作为选项创建vite，并通过yarn添加vite-plugin-pages -dev ，<代码>纱线添加vue-router。

在GitHub上的README之后，我已将以下内容添加到我的vite.config.ts：

import Pages from 'vite-plugin-pages'

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

但是，在下一步中，in main.ts：

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

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

我似乎无法从〜页导入。我找不到模块。 vue-router本身正常工作，因为我可以创建一个路由器罚款，我可以自己声明路由自己。在A 从“虚拟：生成页面” 导入路由，我不知道这两个工作方式。

因此，问题是，我将如何生成动态路线，从整体上设置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"]
}

Answer 3

您还可以在任何类型声明中声明参考。

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