vite+vue3使用glob解决动态路由导出文件路径问题

在 Vite + Vue3 中，我们可以使用 `glob` 模块来解决动态路由导出文件路径的问题。下面是一个简单的实例：

假设我们有一个 `pages` 目录，其中包含多个 `.vue` 文件，每个文件代表一个动态路由。我们需要导出这些动态路由的路径，以便在路由配置中使用。

首先，我们需要安装 `glob` 模块：

npm install glob --save-dev

然后，在 `vite.config.js` 文件中，我们可以使用以下代码来获取所有动态路由的路径：

import glob from 'glob';

export default {
  // ...
  server: {
    // ...
    middleware: async () => {
      const routes = [];
      const files = glob.sync('./src/pages/*.vue');
      files.forEach(file => {
        const name = file.match(/\/(\w+)\.vue$/)[1];
        routes.push({
          path: `/${name.toLowerCase()}`,
          component: () => import(`./pages/${name}.vue`)
        });
      });
      return routes;
    }
  }
};

在上面的代码中，我们使用 `glob.sync()` 方法获取所有 `.vue` 文件的路径。然后，我们遍历每个文件，并使用正则表达式获取文件名。最后，我们将每个动态路由的路径和组件添加到 `routes` 数组中，并返回它。

这样，我们就可以在路由配置中使用这些动态路由的路径了。