vue2.0和vue3.0获取当前文件夹下的所有vue文件区别

在Vue 2.x和Vue 3.x中获取当前文件夹下所有.vue文件的差异通常不是由Vue框架本身直接支持的，而是由构建工具（如Webpack或Vite）处理的。

在Vue 2.x和Vue 3.x中，你可以使用Webpack的require.context()方法来实现这一功能。

Vue 2.x:

const requireComponent = require.context(
  // 其组件目录的相对路径
  './components',
  // 是否搜索其子目录
  false,
  // 匹配基础组件文件名的正则表达式
  /\.vue$/
)
 
requireComponent.keys().forEach(fileName => {
  // 获取组件配置
  const componentConfig = requireComponent(fileName)
 
  // 获取组件的 PascalCase 命名
  const componentName = fileName.replace(/(\.\/|\.vue)/g, '').replace('/', '-')
 
  // 全局注册组件
  Vue.component(componentName, componentConfig.default || componentConfig)
})

Vue 3.x:

import { defineAsyncComponent } from 'vue'
import { fileToComponentName, resolveComponent } from './utils'
 
const requireComponent = require.context(
  // 其组件目录的相对路径
  './components',
  // 是否搜索其子目录
  false,
  // 匹配基础组件文件名的正则表达式
  /\.vue$/
)
 
requireComponent.keys().forEach(fileName => {
  // 获取组件的 PascalCase 命名
  const componentName = fileToComponentName(fileName)
 
  // 全局注册组件
  app.component(
    componentName,
    defineAsyncComponent(() =>
      import(/* @vite-ignore */ resolveComponent(fileName))
    )
  )
})

在这两个例子中，require.context()用于创建一个 require 的上下文，它提供一个方便的API来动态地加载一组文件。然后，你可以遍历这些文件并将它们注册为Vue组件。在Vue 3.x中，我们使用defineAsyncComponent来创建异步组件。

注意：在Vite中，你可能需要使用特殊的导入注释/* @vite-ignore */来避免 Vite 预构建依赖项，因为Vite会尝试在开发服务器启动时预构建所有依赖项，这在动态导入的情况下可能会导致问题。