一个目录下有3个文件夹，怎么使用require.context导入其中两个文件下的vue文件，并注册为全局组件

可以使用如下代码来实现：

const files = require.context('./目录名', true, /\.vue$/)

files.keys().forEach(key => {
  if (key.includes('/文件夹1/') || key.includes('/文件夹2/')) {
    const name = key.split('/').pop().replace(/\.\w+$/, '')
    const component = files(key).default
    Vue.component(name, component)
  }
})

其中，需要将`目录名`替换为实际的目录名，`文件夹1`和`文件夹2`替换为需要导入的文件夹名。如果需要导入所有文件夹下的文件，则可以省略掉`if`条件判断。

相关问题

vue3 require.context 动态使用components组件 全局注册

在Vue 3.0中，无法直接使用Vue.component进行组件注册，而是使用createApp()返回的实例进行全局注册。可以通过使用require.context来实现动态使用components组件的全局注册。首先，在main.js中引入createApp和App组件，并创建app实例。然后，使用require.context来获取components文件夹下的所有.vue文件，并遍历注册每个组件。最后，使用app.component进行全局注册，并使用app.use(router)和app.mount('#app')来启动应用。以下是示例代码：

// main.js
import { createApp } from 'vue'
import App from './App.vue'
import router from './router'

const app = createApp(App);

const requireComponent = require.context(
  './components',
  false,
  /\.vue$/
)

requireComponent.keys().forEach(fileName => {
  const componentConfig = requireComponent(fileName)
  app.component(
    componentConfig.default.name,
    componentConfig.default || componentConfig
  )
})

app.use(router)
app.mount('#app')

这样，你就可以在所有页面中使用动态注册的组件了。

Vue3批量注册全局组件的详细步骤 require.context

批量注册全局组件是Vue3中的一个常用操作，可以提高开发效率。下面是详细步骤：

1. 创建一个components目录用于存放所有的组件，该目录下的每个.vue文件都是一个组件。
2. 在main.js中引入require.context函数，该函数可以自动扫描components目录下的所有文件，生成一个上下文对象。

const files = require.context('./components', true, /\.vue$/)

其中，'./components'是扫描的目录，true表示是否扫描子目录，/\.vue$/是匹配文件的正则表达式。
3. 循环遍历上下文对象，注册每个组件。

files.keys().forEach(key => {
  const name = key.match(/\w+/)[0]
  const component = files(key).default
  app.component(name, component)
})

其中，key是上下文对象中的每个文件路径，name是组件的名称，component是组件的定义。
4. 最后，将app挂载到DOM中。

app.mount('#app')

这样，所有的组件都已经注册为全局组件，可以在任何地方使用它们了。

需要注意的是，以上代码是在Vue3中使用的，如果你使用的是Vue2，需要将app.component改为Vue.component。