Vue3 自动生成路由：根据views文件夹动态创建路由配置

在Vue3中，可以使用require.context函数来自动导入views文件夹下的所有vue文件，并根据文件名生成路由配置。\n\n首先，在项目的src文件夹下创建一个router文件夹，并在其中创建一个index.js文件，用于配置路由。\n\n然后，在index.js文件中，可以使用require.context函数来自动导入views文件夹下的所有vue文件，并生成路由配置。代码如下：\n\njavascript\nimport { createRouter, createWebHistory } from 'vue-router';\n\n// 使用require.context函数自动导入views文件夹下的所有vue文件\nconst files = require.context('../views', true, /.vue$/);\nconst routes = [];\n\n// 遍历导入的文件\nfiles.keys().forEach(key => {\n // 根据文件路径生成路由路径\n const path = key.replace(/^.//, '').replace(/.vue$/, '');\n // 根据文件路径生成路由名称\n const name = path.replace(///g, '-');\n // 导入vue组件\n const component = files(key).default;\n \n // 添加路由配置\n routes.push({\n path: '/' + path,\n name: name,\n component: component\n });\n});\n\nconst router = createRouter({\n history: createWebHistory(),\n routes: routes\n});\n\nexport default router;\n\n\n上述代码中，通过require.context函数导入了../views文件夹下的所有vue文件，并遍历这些文件，根据文件路径生成相应的路由路径和名称，并将vue组件添加到路由配置中。最后，使用createRouter函数创建路由实例，并导出。\n\n最后，在main.js文件中引入路由实例，并将其挂载到Vue应用中：\n\njavascript\nimport { createApp } from 'vue';\nimport App from './App.vue';\nimport router from './router';\n\ncreateApp(App).use(router).mount('#app');\n\n\n这样，根据views文件夹里的vue文件就会自动生成对应的路由配置。