arco design按需导入报错排查思路与解决方案解析

目录
  • 正文
  • 问题描述
  • 排查问题
  • 解决问题
    • 处理思路
  • 总结

正文

记录一档使用arco-design按需加载的问题,来帮助更多的开发者避免。当前项目我使用的 @arco-design/web-vuevite-plugin-style-import 版本是:

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

问题描述

首先根据 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 组件的时候是没有问题的可以正常渲染,但是当我使用组 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 包里面查询一下对应的路径是否有文件

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

匪夷所思的一幕看到了在 /@arco-design/web-vue/es 目录下并没有 form-item 文件夹,还有前面我们遇到所有的报错的组件如 InputSearch InputPassword ImagePreview FormItem 也都是没有对应的文件夹,所以才导致他找不到这个组件的样式文件,但是通过上图可以看到我们导入的 FormItem 组件是从 form 文件夹中导出的,所以我们只需要 @arco-design/web-vue/es/form-item/style/index.js 改成 @arco-design/web-vue/es/form/style/index.js 导出就好了。

解决问题

问题原因找到了那处理起来就方便了, 我们可以写一个方法来修改这个组件的名称获取对应的路径。

处理思路

  • 拿到 resolveStyle() 回调中的 name 通过他生成一个路径
  • 使用 existsSync 判断对应的路径文件是否存在,他返回一个 boolean,存在返回 true 反之 false
  • 文件路径如果不存在就把原路径 - 结尾的名称去除,如原路径是 input-search 转成 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);;
          },
        },
      ],
    }),
  ],
});

总结

resolveStyle() 回调中的 name 返回的是当前组件名称的 name 而且类似 Input InputSearch 这样的组件 arco 是把他们归类到 input 文件夹下,同理他们的样式文件肯定统一在 input文件夹下,所以我们通过 @arco-design/web-vue/es/input-search/style/index.js 路径是找不到的,由此一来找到规则后就通过路径裁剪的形式一步一步的寻找文件,最终解决此类抛错。

以上就是arco design按需导入报错排查思路与解决方案解析的详细内容,更多关于arco design按需导入报错的资料请关注我们其它相关文章!

(0)

相关推荐

  • Qt Quick Designer灰色或者禁用的解决

    今天安装qt6的时候发现一个问题,下面就来解决一下,具体如下: 目前新版本自qt6开始,已经默认禁用了Qt Quick Designer,qt未来将ui图像化重任要交给Qt Design Studio了,目地就是做ui设计的不用安装creator,目前过渡阶段,可以从插件中心启用. 到此这篇关于Qt Quick Designer灰色或者禁用的解决的文章就介绍到这了,更多相关Qt Quick Designer禁用内容请搜索我们以前的文章或继续浏览下面的相关文章希望大家以后多多支持我们!

  • 前端框架arco table源码遇到的问题解析

    目录 前言 离谱的filter代码 疑问1: 打不全补丁 更大的问题 错误的继续 显而易见的问题 结尾 如何改进,有兴趣的同学可以去提pr 前言 先不说别的,上两个arco design table的bug.本来是写react table组件,然后看源码学习思路,结果看的我真的很想吐槽.(其他组件我在学习源码上受益匪浅,尤其是工程化arco-cli那部分,我自己尝试写的轮子也是受到很多启发,这个吐槽并不是真的有恶意,我对arco和腾讯的tdeisgn是有期待的,因为ant一家独大太久了,很期待新

  • Qt Design Studio安装图文教程

    前言 目前Qt quick designer默认被禁用: QT quick designer从新版本qt6开始该功能默认被禁用,现在打开是灰色的!qt打算未来Qt Design Studio和qt creator分离,目标就是设计ui的可以只用Qt Design Studio,但是目前改功能并未完全关闭,可以下图所示,帮助,关于插件,QMLDesigner启用.最终该功能会被下线,由Qt Design Studio承担此重任. 1.去官方地址下载 地址路径如下图: 断网安装,不需要的登录用户账户

  • Ant Design_Form表单上传文件组件实现详解

    目录 背景 实现 问题1: 问题2: tip1:注意一下新增和修改时校验方法 tip2: 注意一下beforeUpload的返回值 背景 需要实现的需求:在一个表单提交中,需要提交各种组件的提交信息,其中包括上传文件:一般呢,我们会在选择文件的时候将文件先传到服务器,拿到文件的URL,在提交表单的时候传的其实是文件的URL: 刚开始,对文件没有必填的校验,是比较简单的:但是后来要求文件是必传的,需要加上文件的校验,就暴漏了一些小问题: 实现 首先,先对Upload组件加上必传的校验 rules=

  • arco design按需导入报错排查思路与解决方案解析

    目录 正文 问题描述 排查问题 解决问题 处理思路 总结 正文 记录一档使用arco-design按需加载的问题,来帮助更多的开发者避免.当前项目我使用的 @arco-design/web-vue 与 vite-plugin-style-import 版本是: "@arco-design/web-vue": "^2.43.2", "vite-plugin-style-import": "^2.0.0" 问题描述 首先根据 ar

  • Vue3+Element-plus项目自动导入报错的解决方案

    目录 前言 安装步骤 1.安装插件 2.vue.config.js 设置 3.npm run serve 出错 解决方案 1.问题原因 1.1 unimport 包报错 1.2 node.js 和 npm 版本过低 2.解决方法 2.1 降低 unplugin-auto-import 插件版本 2.2 升级 node.js 和 npm 版本 补充:element-plus自动按需导入及出错解决 总结 前言 在创建 Vue3 + Element-plus 项目时,根据 Element-plus 文

  • pycharm中keras导入报错无法自动补全cannot find reference分析

    目录 引言 分析 解决方法 理论解释 1. 直接导入keras 2. 从tensorflow里导入keras 3. 从tensorflow.python里导入keras: 4. 不导入keras 总结 引言 目前无论是中文还是国外网站对于如何正确的导入keras,如何从tensorflow中导入keras,如何在pycharm中从tensorflow里导入keras,这几个问题都众说纷纭,往往是互相借鉴给出一个可用的解决方法,但没有更进一步的解释了.常见因为keras导入引发的问题有以下几个:

  • 阿里云镜像安装docker报错的问题及解决方案

    问题 使用阿里云镜像安装docker时出现如下报错,具体如下图: Malformed entry 60 in list file /etc/apt/sources.list (Component) 解决方案 注意到报错提示/etc/apt/sources.list 这个文件第60行格式错误,那么尝试把这行注释掉.先打开这个文件: $ sudoedit /etc/apt/sources.list 再使用vim的语法进入编辑模式后,找到第60行的 deb [arch=amd64] https://d

  • sql注入报错之注入原理实例解析

    目录 前言 0x01 0x02 0x03 总结 前言 我相信很多小伙伴在玩sql注入报错注入时都会有一个疑问,为什么这么写就会报错?曾经我去查询的时候,也没有找到满意的答案,时隔几个月终于找到搞清楚原理,特此记录,也希望后来的小伙伴能够少走弯路 0x01 我们先来看一看现象,我这里有一个users表,里面有五条数据: 然后用我们的报错语句查询一下: select count(*),(concat(floor(rand()*2),(select version())))x from users g

  • 微信小程序 HTTPS报错整理常见问题及解决方案

    微信小程序 HTTPS报错常见问题及解决方案 微信小程序开放公测已经一个多月了,因官方需求文档要求后台使用HTTPS请求进行网络通信,不满足条件的域名和协议无法请求.越来越多的开发者纷纷使用SSL证书实践微信小程序的应用情况,但仍然会碰到各类问题.本文列举了SSL证书常见的报错和解决办法,供开发者参考. 常见问题一 在微信小程序内测的过程中,几乎每个开发者们在实践的过程中都遇到了下图的报错: 原因及解决办法: 这是因为wx.request 发起的是 https 请求,微信小程序读取大部分是请求A

  • springBoot启动报错log4j冲突的解决方案

    springBoot启动报错log4j冲突 先上一段报错内容 SLF4J: Class path contains multiple SLF4J bindings. SLF4J: Found binding in [jar:file:/D:/soft/apache-tomcat-8.5.31/webapps/ui/WEB-INF/lib/log4j-slf4j-impl-2.7.jar!/org/slf4j/impl/StaticLoggerBinder.class] SLF4J: Found

  • redis反序列化报错原因分析以及解决方案

    目录 redis反序列化报错原因分析 序列化id’不一致 实体类属性不一致 redis序列化转换类型报错 总结 redis反序列化报错原因分析 问题:Cannot deserialize,无法反序列化 分析: 序列化id’不一致 1.实体类实现了序列化接口后,没有指定序列化id. 2.读和写的class版本不一致,srpingboot jar包版本不一致的两个class文件,序列化id不一致.因为我们项目是几个系统对接,共享的一个redis库. 实体类属性不一致 可能存到redis的时候是两个属

  • flex 开发项目报错之404错误解决方案

    最近两天被HttpStates404这个错误折腾的够呛,在网上查了很多文章,基本上都是说的同样的问题 1URL不对--(但是自己确信应该是对的,因为在XP系统下运行正常,换到Win7下就不行) 2Web.xml配置不对--(自己对这里面的东西不是很了解,所以在网上查了一些资料,一知半解的跟着网上的步骤走,结果还是不行) 最后实在没办法,又回到1的思路上,因为归根结底是没找到该网页,这是自己又重新审视了一下Flex编译生成的文件.终于在这时豁然开朗 我之前Flex编译生成的时候是生成SWF文件和与

  • SpringBoot下载Excel文件时,报错文件损坏的解决方案

    SpringBoot下载Excel文件文件损坏 我把模板文件放在了resources目录下 maven插件打包项目的时候,默认会压缩resources目录下的文件. 服务器读取的文件流来自于压缩后的文件,而返回给浏览器时,浏览器把他当作正常的文件解析,自然不能得到正确的结果. 解决方案: 配置一下maven插件,打包的时候不要压缩模板文件,排除拓展名为xlsx的文件. <plugin> <groupId>org.apache.maven.plugins</groupId>

随机推荐