Laravel 中使用 Mix 配置 Element-plus 自动导入

Element-plus 是基于 Vue3 的响应式框架，在 Laravel 中使用 Laravel Mix 实现 Element-plus 的样式文件的自动导入，以此代替全局引入的方式，降低 CSS 文件的大小。

安装插件

在项目根目录下执行指令

npm install -D unplugin-vue-components unplugin-auto-import

如果你使用的是 Laravel Sail 环境，别忘记在命令前面加上 sail 前缀

修改 webpack.mix.js

修改 Laravel 项目的根目录 webpack.mix.js

const AutoImport = require('unplugin-auto-import/webpack')
const Components = require('unplugin-vue-components/webpack')
const {ElementPlusResolver} = require('unplugin-vue-components/resolvers')

mix.webpackConfig({
    plugins: [
        AutoImport({
            resolvers: [ElementPlusResolver({
                exclude: new RegExp(/^(?!.*loading-directive).*$/)
            })],
        }),
        Components({
            resolvers: [ElementPlusResolver()],
        }),
    ]
});

注意到其中有一段代码

exclude: new RegExp(/^(?!.*loading-directive).*$/)

这是用来解决自动导入后引发的 Cannot find module 'element-plus/es/components/loading-directive/style/css 错误，原理是通过正则表达式取消自动加载 loading-directive 样式，错误的引发原因未知。

Enjoy it

注释掉原先引入所有样式的代码，然后执行指令（如在配置前已经执行则需要终止后重新执行）

npm run watch-poll

你将发现你的应用仍然正常运行

参考资料

Element-plus 快速开始

How to include webpack plugins when using Laravel Mix? - Stack Overflow

vue3.x 项目使用element-plus 自动按需导入 使用v-loading报错 无法找到样式

你也可以在我的个人博客看到这篇文章：Laravel 中使用 Mix 配置 Element-plus 自动导入 | microven’s blog