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

本作品采用《CC 协议》,转载必须注明作者和本文链接
《L01 基础入门》
我们将带你从零开发一个项目并部署到线上,本课程教授 Web 开发中专业、实用的技能,如 Git 工作流、Laravel Mix 前端工作流等。
《G01 Go 实战入门》
从零开始带你一步步开发一个 Go 博客项目,让你在最短的时间内学会使用 Go 进行编码。项目结构很大程度上参考了 Laravel。