如何搭配Laravel Mix使用unplugin-vue-components自动加载Vue3组件

1. 调整配置加载顺序 #

Laravel Mix 调用 .vue() 方法时才会注入 Vue3 相关的 webpack loader 规则，unplugin-vue-components 依赖这些规则才能正常扫描组件，原配置中插件注入顺序早于 Vue 规则加载，导致无法识别 Vue 单文件组件。

2. 补全插件配置 #

显式指定 Vue 版本、组件后缀，使用绝对路径定位组件目录避免路径解析错误。

3. 修改后的完整配置 #

webpack.mix.js 代码： #

const mix = require('laravel-mix');
const path = require('path');
const Components = require('unplugin-vue-components/webpack');

// 先加载JS和Vue相关基础配置
mix.js('resources/js/main.js', 'public/js').vue();

mix.webpackConfig({
    plugins: [
        Components({
            // 绝对路径避免相对路径解析异常
            dirs: [path.resolve(__dirname, 'resources/js/components')],
            // 显式指定适配Vue3
            versions: {
                vue: 3
            },
            // 配置识别的组件后缀
            extensions: ['vue'],
            // 非TS项目关闭类型声明文件生成
            dts: false,
            // 子目录下的组件不需要加目录前缀可开启该配置
            // directoryAsNamespace: false
        })
    ]
});

4. 注意事项 #

• unplugin-vue-components 只会扫描 .vue 单文件组件内使用的组件标签自动导入，直接在 Blade 模板中编写的组件标签无法被识别，无法触发自动导入。
• 修改配置后需要清理缓存再重新构建，避免旧缓存影响生效：

rm -rf public/js && rm -rf node_modules/.cache && npm run dev

验证方式 #

在项目中已引入的任意单文件组件内直接写 <RecoverPassword /> 标签，无需手动导入即可正常渲染组件。

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