佛山网站建设及优化公司,开封旅游网站建设项目方案,大型企业网络拓扑图,seo快速推广前言
最近在项目中使用 iconpark-icon 来管理图标#xff0c;一切都很顺利#xff0c;引入链接后#xff0c;图标正常显示#xff0c;没有报错。但是控制台却发出了预警信息。
[Vue warn]: Failed to resolve component: iconpark-icon If this is a native custom eleme…前言
最近在项目中使用 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 图标在线链接功能使用指南。 可惜的是第一种方法经验证无效×。
app.config.compilerOptions.isCustomElement tag tag iconpark-icon;更可惜的是Vue3 项目基本都是 TS Vite 技术栈开发所以第二种针对 webpack 的方法依然无效×。不过代码先放出来或许也有采用webpack 打包工具的。
// 如果是通过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 官网 看看对此有没有介绍。
果然官网对此也是有说明的。
// 将所有标签前缀为 ion- 的标签视为自定义元素
app.config.compilerOptions.isCustomElement (tag) {return tag.startsWith(ion-)
}不过此方法跟 iconpark 的方法一致不适用于 vue3 ts vite 技术栈。所以只能再去 vite 官网看看了但是很可惜我并没有找到相关的描述。到此所有捷径都已经走完只有最后的办法了自己去解决它。
好在有 webpack 可以参照因此解决起来并没有花费多久只在细节上做些修改即可。
所以真正的解决办法是在 vite.config.ts 中添加以下代码
export default defineConfig({plugins: [vue({template: {compilerOptions: {isCustomElement: (tag) tag.startsWith(iconpark-)}}}),],
})只需要加上这么一块内容即可消除警报。
END
