升级到新版hbuildx后，在chrome下运行uni-app出现报错 uni-app

升级到新版hbuildx后，在chrome下运行uni-app出现报错 uni-app

问题描述

升级到新版hbuildx后，在chrome下运行uni-app出现报错。使用了icon组件：

<icon type="warn" size="93" color="#FFBE00"></icon>

错误信息

vue.runtime.esm.js:593 [Vue warn]: Unknown custom element: <v-uni-icon> - did you register the component correctly? For recursive components, make sure to provide the "name" option.  

found in  

---> <PagesDevelopmentIndex> at Vueproject/tdsa/pages/development/index.vue  
     <PageBody> at pageBody.vue  
       <Page> at index.vue  
         <PagesDevelopmentIndex5>  
           <App> at index.vue  
             <Root>

重现步骤

  1. 运行到chrome里面

结果

  • ICON不见了
  • tabbar没有明显错误

期望

  • ICON正常显示，不报错

IDE运行环境说明

环境 版本
HBuilderX 1.2.0.20181122
操作系统 win10

App运行环境说明

环境 版本
Chrome

更多关于升级到新版hbuildx后，在chrome下运行uni-app出现报错 uni-app的实战教程也可以访问 https://www.itying.com/category-93-b0.html

4 回复

h5端并没有icon组件。

更多关于升级到新版hbuildx后，在chrome下运行uni-app出现报错 uni-app的实战教程也可以访问 https://www.itying.com/category-93-b0.html


但是小程序和APP运行就是对的！

uniapp并未实现该组件，具体参考文档：https://uniapp.dcloud.io/component/README

这个错误是由于新版HBuilderX中uni-app的组件注册方式发生了变化导致的。对于icon组件，现在需要显式引入才能使用。

解决方案：

  1. 在页面中显式引入v-uni-icon组件：
import vUniIcon from '@dcloudio/uni-ui/lib/v-uni-icon/v-uni-icon.vue'
export default {
  components: {
    vUniIcon
  }
}
  1. 或者改用uni-icons组件（推荐）：
<uni-icons type="warn" size="93" color="#FFBE00"></uni-icons>
  1. 确保项目中已安装uni-ui：
npm install @dcloudio/uni-ui
  1. 在pages.json中全局配置easycom：
"easycom": {
  "autoscan": true,
  "custom": {
    "^v-uni-(.*)": "@dcloudio/uni-ui/lib/v-uni-$1/v-uni-$1.vue"
  }
}
回到顶部