正文

記錄一檔使用arco-design按需加載的問(wèn)題，來(lái)幫助更多的開(kāi)發(fā)者避免。當(dāng)前項(xiàng)目我使用的 @arco-design/web-vue 與 vite-plugin-style-import 版本是：

 "@arco-design/web-vue": "^2.43.2",
 "vite-plugin-style-import": "^2.0.0"

問(wèn)題描述

首先根據(jù) arco-design 官方的示例，我使用 vite-plugin-style-import 插件來(lái)自動(dòng)加載組件樣式，代碼如下：

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 組件的時(shí)候是沒(méi)有問(wèn)題的可以正常渲染，但是當(dāng)我使用組 InputSearch InputPassword ImagePreview FormItem... 等類似于一些駝峰命名的組件（注意：不包含所有駝峰名的組件），在vite項(xiàng)目中會(huì)報(bào)一個(gè)樣式引入的錯(cuò)誤如下：

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?

排查問(wèn)題

可以看到我們?cè)?vite.config.js 配置文件中 resolveStyle 方法中返回了一個(gè)樣式文件的路徑，可以打印出來(lái)看一下這個(gè) 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`;
          },
        },
      ],
    }),

這么一看也沒(méi)有什么問(wèn)題，我使用組件的名字就是 FormItem 訪問(wèn)的也是 form-item，那再去 @arco-design 包里面查詢一下對(duì)應(yīng)的路徑是否有文件

路徑 @arco-design/web-vue/es/form-item/style/index.js

匪夷所思的一幕看到了在 /@arco-design/web-vue/es 目錄下并沒(méi)有 form-item 文件夾，還有前面我們遇到所有的報(bào)錯(cuò)的組件如 InputSearch InputPassword ImagePreview FormItem 也都是沒(méi)有對(duì)應(yīng)的文件夾，所以才導(dǎo)致他找不到這個(gè)組件的樣式文件，但是通過(guò)上圖可以看到我們導(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)出就好了。

解決問(wèn)題

問(wèn)題原因找到了那處理起來(lái)就方便了， 我們可以寫(xiě)一個(gè)方法來(lái)修改這個(gè)組件的名稱獲取對(duì)應(yīng)的路徑。

處理思路

• 拿到 resolveStyle() 回調(diào)中的 name 通過(guò)他生成一個(gè)路徑
• 使用 existsSync 判斷對(duì)應(yīng)的路徑文件是否存在，他返回一個(gè) boolean，存在返回 true 反之 false
• 文件路徑如果不存在就把原路徑 - 結(jié)尾的名稱去除，如原路徑是 input-search 轉(zhuǎn)成 input， 如果有三級(jí)依此類推，一步一步的去找。
• 最終返回正確的路徑，如果沒(méi)有就直接返回 "" 字符串

最終代碼如下：

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);;
          },
        },
      ],
    }),
  ],
});

總結(jié)

resolveStyle() 回調(diào)中的 name 返回的是當(dāng)前組件名稱的 name 而且類似 Input InputSearch 這樣的組件 arco 是把他們歸類到 input 文件夾下，同理他們的樣式文件肯定統(tǒng)一在 input文件夾下，所以我們通過(guò) @arco-design/web-vue/es/input-search/style/index.js 路徑是找不到的，由此一來(lái)找到規(guī)則后就通過(guò)路徑裁剪的形式一步一步的尋找文件，最終解決此類拋錯(cuò)。

以上就是arco design按需導(dǎo)入報(bào)錯(cuò)排查思路與解決方案解析的詳細(xì)內(nèi)容，更多關(guān)于arco design按需導(dǎo)入報(bào)錯(cuò)的資料請(qǐng)關(guān)注腳本之家其它相關(guān)文章！