如何在Nuxt中批量导入组件？解决_Ctor名称无效报错

问题背景 #

我需要导入指定目录下的多个组件，希望无需逐个指定组件即可使用它们。目前我在目标组件目录中创建了index.js文件，代码如下：

import Component1 from './Component1'
import Component2 from './Component2'

export default {
    Component1,
    Component2
}

随后我在页面组件/模板中按如下方式导入这些组件：

import components from '@/components/blocks';
export default {
    // ...其他配置
    components: {
        ...components
    }
    // ...其他配置
}

该方案看似可行，但控制台出现如下报错：

[Vue warn]: Invalid component name: "_Ctor". Component names should conform to valid custom element name in html5 specification.

我希望仍无需逐个导入组件（可接受在导出时逐个指定组件），同时解决该报错，请问是否有可行的实现方式？

解决方案 #

原因分析 #

报错核心是当前用default导出组件对象时，Vue会误将组件内部的构造函数引用（_Ctor）识别为组件名称，而这个名称不符合HTML自定义元素命名规范（必须含连字符、不能是保留字等）。

修正方案 #

方案1：改用命名导出（推荐）

修改组件目录的index.js为命名导出：

import Component1 from './Component1'
import Component2 from './Component2'

export {
    Component1,
    Component2
}

页面组件中批量导入并直接使用：

import * as components from '@/components/blocks';
export default {
    // ...其他配置
    components
    // ...其他配置
}

方案2：保持对象导出但明确指定组件名

如果习惯用默认导出对象，页面组件中明确解构指定组件名，避免Vue误识别内部属性：

import components from '@/components/blocks';
export default {
    // ...其他配置
    components: {
        Component1: components.Component1,
        Component2: components.Component2
    }
    // ...其他配置
}

进阶优化：自动批量导入（彻底告别手动添加组件） #

借助Webpack的require.context实现自动导入目录下所有组件，新增组件无需修改index.js：
修改组件目录的index.js：

const components = {}

// 自动导入当前目录下所有.vue文件
const requireComponent = require.context('./', false, /\.vue$/)

requireComponent.keys().forEach(fileName => {
    // 获取组件配置
    const componentConfig = requireComponent(fileName)
    // 把文件名转为PascalCase格式的组件名
    const componentName = fileName
        .replace(/^\.\//, '')
        .replace(/\.vue$/, '')
        .split('-')
        .map(word => word.charAt(0).toUpperCase() + word.slice(1))
        .join('')
    
    components[componentName] = componentConfig.default || componentConfig
})

export default components

页面组件中依旧用原有方式导入即可：

import components from '@/components/blocks';
export default {
    // ...其他配置
    components: {
        ...components
    }
    // ...其他配置
}

内容的提问来源于stack exchange，提问作者tobiasg