Laravel 中使用 Mix 配置 Element-plus 自動匯入

微波爐發表於2022-04-15
Laravel

Element-plus 是基於 Vue3 的響應式框架，在 Laravel 中使用 Laravel Mix 實現 Element-plus 的樣式檔案的自動匯入，以此代替全域性引入的方式，降低 CSS 檔案的大小。

在專案根目錄下執行指令

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

如果你使用的是 Laravel Sail 環境，別忘記在命令前面加上 sail 字首

修改 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 樣式，錯誤的引發原因未知。

註釋掉原先引入所有樣式的程式碼，然後執行指令（如在配置前已經執行則需要終止後重新執行）

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 協議》，轉載必須註明作者和本文連結

相關文章