vue3 怎么根据views文件夹里的vue文件来自动生成路由？代码怎么实现？

在Vue3中，可以使用require.context函数来自动导入views文件夹下的所有vue文件，并根据文件名生成路由配置。

首先，在项目的src文件夹下创建一个router文件夹，并在其中创建一个index.js文件，用于配置路由。

然后，在index.js文件中，可以使用require.context函数来自动导入views文件夹下的所有vue文件，并生成路由配置。代码如下：

import { createRouter, createWebHistory } from 'vue-router';

// 使用require.context函数自动导入views文件夹下的所有vue文件
const files = require.context('../views', true, /\.vue$/);
const routes = [];

// 遍历导入的文件
files.keys().forEach(key => {
  // 根据文件路径生成路由路径
  const path = key.replace(/^\.\//, '').replace(/\.vue$/, '');
  // 根据文件路径生成路由名称
  const name = path.replace(/\//g, '-');
  // 导入vue组件
  const component = files(key).default;
  
  // 添加路由配置
  routes.push({
    path: '/' + path,
    name: name,
    component: component
  });
});

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

export default router;

上述代码中，通过require.context函数导入了../views文件夹下的所有vue文件，并遍历这些文件，根据文件路径生成相应的路由路径和名称，并将vue组件添加到路由配置中。最后，使用createRouter函数创建路由实例，并导出。

最后，在main.js文件中引入路由实例，并将其挂载到Vue应用中：

import { createApp } from 'vue';
import App from './App.vue';
import router from './router';

createApp(App).use(router).mount('#app');

这样，根据views文件夹里的vue文件就会自动生成对应的路由配置