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
你将发现你的应用仍然正常运行
参考资料#
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 协议》,转载必须注明作者和本文链接
推荐文章: