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 协议》,转载必须注明作者和本文链接
《L05 电商实战》
从零开发一个电商项目,功能包括电商后台、商品 & SKU 管理、购物车、订单管理、支付宝支付、微信支付、订单退款流程、优惠券等
《L02 从零构建论坛系统》
以构建论坛项目 LaraBBS 为线索,展开对 Laravel 框架的全面学习。应用程序架构思路贴近 Laravel 框架的设计哲学。
讨论数量: 0
(= ̄ω ̄=)··· 暂无内容!

讨论应以学习和精进为目的。请勿发布不友善或者负能量的内容,与人为善,比聪明更重要!