vite+vue3使用glob e Router warn]: Record with path "/article/list" is either missing a "component(s)" or "children" property. w

这个警告提示是因为你在使用 Vue Router 时，定义了一个路由记录（Route Record），但是这个路由记录缺少了 "component(s)" 或 "children" 属性。具体来说，你的 "/article/list" 路由可能是这样定义的：

{
  path: '/article/list',
  name: 'ArticleList'
}

这个定义中缺少了 "component(s)" 或 "children" 属性，因此 Vue Router 会发出警告。要解决这个问题，你需要在路由定义中添加 "component(s)" 属性，来指定这个路由所对应的组件。例如：

{
  path: '/article/list',
  name: 'ArticleList',
  component: ArticleList // 这里的 ArticleList 是你定义的组件
}

或者你也可以添加 "children" 属性，来定义这个路由的子路由。例如：

{
  path: '/article/list',
  name: 'ArticleList',
  children: [
    {
      path: 'detail/:id', // 子路由的路径
      name: 'ArticleDetail',
      component: ArticleDetail // 子路由所对应的组件
    }
  ]
}

这样就可以消除警告了。

相关问题

vite+vue3使用glob获取到undefined

在 Vite + Vue3 中使用 `glob` 获取文件时，如果返回 `undefined`，可能是因为你没有在 `vite.config.js` 中配置正确的 `root` 路径。

你需要在 `vite.config.js` 中添加以下代码：

import { defineConfig } from 'vite'
import Vue from '@vitejs/plugin-vue'

export default defineConfig({
  plugins: [
    Vue({
      include: [/\.vue$/, /\.md$/]
    })
  ],
  resolve: {
    alias: {
      '@': '/src'
    }
  },
  build: {
    // 配置打包路径
    outDir: 'dist',
    assetsDir: './',
    assetsInlineLimit: 4096,
    sourcemap: false,
    terserOptions: {
      compress: {
        drop_console: true,
        drop_debugger: true
      }
    }
  },
  server: {
    // 配置服务启动端口号
    port: 4000,
    // 配置服务启动时是否自动打开浏览器
    open: true,
    // 允许跨域
    cors: true,
    // 配置代理
    proxy: {
      '/api': {
        target: 'http://xxx.xxx.xxx.xxx:8000',
        changeOrigin: true,
        secure: false,
        rewrite: (path) => path.replace('/api/', '/')
      }
    },
    // 配置静态资源访问路径
    hmr: {
      overlay: true
    }
  },
  // 配置根路径
  root: './'
})

其中，`root` 配置项为相对于项目根目录的路径，该路径应该指向你的源代码所在目录。

如果你的源代码位于项目根目录的 `src` 目录下，则应该将 `root` 配置为 `'./src'`。如果你的源代码位于项目根目录下，则应该将 `root` 配置为 `'./'`。

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` 数组中，并返回它。

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