您好,登錄后才能下訂單哦!
本篇內(nèi)容主要講解“arco design按需導(dǎo)入報錯如何解決”,感興趣的朋友不妨來看看。本文介紹的方法操作簡單快捷,實用性強。下面就讓小編來帶大家學(xué)習(xí)“arco design按需導(dǎo)入報錯如何解決”吧!
記錄一檔使用arco-design按需加載的問題,來幫助更多的開發(fā)者避免。當(dāng)前項目我使用的 @arco-design/web-vue
與 vite-plugin-style-import
版本是:
"@arco-design/web-vue": "^2.43.2", "vite-plugin-style-import": "^2.0.0"
首先根據(jù) arco-design 官方的示例,我使用 vite-plugin-style-import 插件來自動加載組件樣式,代碼如下:
import { defineConfig } from "vite"; import vue from "@vitejs/plugin-vue"; import { createStyleImportPlugin } from "vite-plugin-style-import"; export default defineConfig({ server:{ host:"0.0.0.0", }, plugins: [ vue(), createStyleImportPlugin({ libs: [ { libraryName: "@arco-design/web-vue", esModule: true, resolveStyle: (name) => { // less return `@arco-design/web-vue/es/${name}/style/index.js`; }, }, ], }), ], });
正常使用 Inpuit
Button
組件的時候是沒有問題的可以正常渲染,但是當(dāng)我使用組 InputSearch
InputPassword
ImagePreview
FormItem...
等類似于一些駝峰命名的組件(注意:不包含所有駝峰名的組件),在vite項目中會報一個樣式引入的錯誤如下:
Failed to resolve import "/mnt/d/projectSpace/self-test/node_modules/@arco-design/web-vue/es/form-item/style/index.js" from "src/App.vue". Does the file exist?
可以看到我們在 vite.config.js
配置文件中 resolveStyle
方法中返回了一個樣式文件的路徑,可以打印出來看一下這個 name
是什么。
createStyleImportPlugin({ libs: [ { libraryName: "@arco-design/web-vue", esModule: true, resolveStyle: (name) => { console.log("resolveStyle===>",name) // less return `@arco-design/web-vue/es/${name}/style/index.js`; }, }, ], }),
這么一看也沒有什么問題,我使用組件的名字就是 FormItem
訪問的也是 form-item
,那再去 @arco-design
包里面查詢一下對應(yīng)的路徑是否有文件
路徑 @arco-design/web-vue/es/form-item/style/index.js
匪夷所思的一幕看到了在 /@arco-design/web-vue/es
目錄下并沒有 form-item
文件夾,還有前面我們遇到所有的報錯的組件如 InputSearch
InputPassword
ImagePreview
FormItem
也都是沒有對應(yīng)的文件夾,所以才導(dǎo)致他找不到這個組件的樣式文件,但是通過上圖可以看到我們導(dǎo)入的 FormItem
組件是從 form
文件夾中導(dǎo)出的,所以我們只需要 @arco-design/web-vue/es/form-item/style/index.js
改成 @arco-design/web-vue/es/form/style/index.js
導(dǎo)出就好了。
問題原因找到了那處理起來就方便了, 我們可以寫一個方法來修改這個組件的名稱獲取對應(yīng)的路徑。
拿到 resolveStyle()
回調(diào)中的 name
通過他生成一個路徑
使用 existsSync
判斷對應(yīng)的路徑文件是否存在,他返回一個 boolean
,存在返回 true
反之 false
文件路徑如果不存在就把原路徑 -
結(jié)尾的名稱去除,如原路徑是 input-search
轉(zhuǎn)成 input
, 如果有三級依此類推,一步一步的去找。
最終返回正確的路徑,如果沒有就直接返回 ""
字符串
最終代碼如下:
import { existsSync } from "node:fs"; import { join } from "node:path"; import { defineConfig } from "vite"; import vue from "@vitejs/plugin-vue"; import { createStyleImportPlugin } from "vite-plugin-style-import"; // 獲取arco樣式路徑 function getArcoStylePath(name) { const names = name.split("-"); const path = `@arco-design/web-vue/es/${name}/style/index.js`; if (existsSync(join(__dirname, "./node_modules/" + path))) { return path; } else { names.pop() return getArcoStylePath(names.join("-")) || "" } } export default defineConfig({ server: { host: "0.0.0.0", }, plugins: [ vue(), createStyleImportPlugin({ libs: [ { libraryName: "@arco-design/web-vue", esModule: true, resolveStyle: (name) => { // less return getArcoStylePath(name);; }, }, ], }), ], });
到此,相信大家對“arco design按需導(dǎo)入報錯如何解決”有了更深的了解,不妨來實際操作一番吧!這里是億速云網(wǎng)站,更多相關(guān)內(nèi)容可以進入相關(guān)頻道進行查詢,關(guān)注我們,繼續(xù)學(xué)習(xí)!
免責(zé)聲明:本站發(fā)布的內(nèi)容(圖片、視頻和文字)以原創(chuàng)、轉(zhuǎn)載和分享為主,文章觀點不代表本網(wǎng)站立場,如果涉及侵權(quán)請聯(lián)系站長郵箱:is@yisu.com進行舉報,并提供相關(guān)證據(jù),一經(jīng)查實,將立刻刪除涉嫌侵權(quán)內(nèi)容。