解决vue3使用iconpark控制台预警提示问题

前言

最近在项目中使用 iconpark-icon 来管理图标,一切都很顺利,引入链接后,图标正常显示,没有报错。但是控制台却发出了预警信息。

[Vue warn]: Failed to resolve component: iconpark-icon If this is a native custom element, make sure to exclude it from component resolution via compilerOptions.isCustomElement.

虽说不影响使用,但看着着实难受,于是研究了一下,成功解决预警提示。

解决办法

首先看一下警告内容,这个警告的意思是 Vue.js 无法找到名为 "iconpark-icon" 的组件。可能造成这个问题的原因是组件没有被正确地注册或者导入。

看完警告信息后,解决办法就很简单了,只要告诉 Vue"iconpark-icon" 是什么或者让其忽略这个检查即可。关于这一点,iconpark 的文档中是有说明的 IconPark 图标在线链接功能使用指南

可惜的是第一种方法经验证,无效(×)。

javascript 复制代码
app.config.compilerOptions.isCustomElement = tag => tag === 'iconpark-icon';

更可惜的是,Vue3 项目,基本都是 TS + Vite 技术栈开发,所以第二种针对 webpack 的方法,依然无效(×)。不过代码先放出来,或许也有采用webpack 打包工具的。

javascript 复制代码
// 如果是通过vue-cli, 在vue.config.js中配置
module.exports = {
    chainWebpack: config => {
      config.module
        .rule('vue')
        .use('vue-loader')
          .tap(options => {
              options.compilerOptions = options.compilerOptions || {};
              options.compilerOptions.isCustomElement = tag => tag === 'iconpark-icon'
            // modify the options...
            return options
          })
    }
}

到了这个时候,当然得去 Vue 官网 看看,对此有没有介绍。

果然,官网对此也是有说明的。

javascript 复制代码
// 将所有标签前缀为 `ion-` 的标签视为自定义元素
app.config.compilerOptions.isCustomElement = (tag) => {
  return tag.startsWith('ion-')
}

不过此方法跟 iconpark 的方法一致,不适用于 vue3 + ts + vite 技术栈。所以只能再去 vite 官网看看了,但是很可惜,我并没有找到相关的描述。到此所有捷径都已经走完,只有最后的办法了,自己去解决它。

好在有 webpack 可以参照,因此解决起来并没有花费多久,只在细节上做些修改即可。

所以,真正的解决办法是:在 vite.config.ts 中添加以下代码

javascript 复制代码
export default defineConfig({
  plugins: [
    vue({
      template: {
        compilerOptions: {
          isCustomElement: (tag) => tag.startsWith('iconpark-')
        }
      }
    }),
  ],
})

只需要加上这么一块内容,即可消除警报。

END

相关推荐
祝余呀6 分钟前
HTML初学者第四天
前端·html
浮桥1 小时前
vue3实现pdf文件预览 - vue-pdf-embed
前端·vue.js·pdf
AA-代码批发V哥2 小时前
Vue框架之钩子函数详解
vue.js
七夜zippoe2 小时前
前端开发中的难题及解决方案
前端·问题
四季豆豆豆2 小时前
博客项目 laravel vue mysql 第四章 分类功能
vue.js·mysql·laravel
晓13133 小时前
JavaScript加强篇——第七章 浏览器对象与存储要点
开发语言·javascript·ecmascript
Hockor3 小时前
用 Kimi K2 写前端是一种什么体验?还支持 Claude Code 接入?
前端
杨进军3 小时前
React 实现 useMemo
前端·react.js·前端框架
海底火旺3 小时前
浏览器渲染全过程解析
前端·javascript·浏览器
你听得到113 小时前
揭秘Flutter图片编辑器核心技术:从状态驱动架构到高保真图像处理
android·前端·flutter