uni-app引入uview组件显示undefined
uni-app引入uview组件显示undefined
| 信息类别 | 详情 |
|---|---|
| 产品分类 | uniapp/App |
| PC开发环境 | Windows |
| PC版本号 | 3.4.7.20220422 |
| HBuilderX类型 | Alpha |
| HBuilderX版本 | 3.4.7 |
| 手机系统 | Android |
| 手机系统版本 | Android 11 |
| 手机厂商 | OPPO |
| 手机机型 | oppoA11 |
| 页面类型 | vue |
| vue版本 | vue2 |
| 打包方式 | 云端 |
| 项目创建方式 | HBuilderX |
操作步骤：
- 打测试包 用手机打开
预期结果：
- 没有undefined 组件弹框正常显示
实际结果：
- 弹框不能出现 显示undefined
bug描述：
uniapp 引用uview组件 进入页面就会出现undefined 在电脑预览到浏览器 显示正常 一打包到手机上 打开就显示undefined
由u-icon 源码可知
// #ifdef APP-NVUE
// nvue通过weex的dom模块引入字体，相关文档地址如下：
// https://weex.apache.org/zh/docs/modules/dom.html#addrule
// const fontUrl = ‘https://at.alicdn.com/t/font_2225171_8kdcwk4po24.ttf’ // 修改前
const fontUrl = require(’./font_2225171_8kdcwk4po24.ttf’)
const domModule = weex.requireModule(‘dom’)
domModule.addRule(‘fontFace’, {
‘fontFamily’: “uicon-iconfont”,
‘src’: url('${fontUrl}')
})
// #endif
....
/* #ifndef APP-NVUE */
// 非nvue下加载字体
@font-face {
font-family: 'uicon-iconfont';
// src: url('https://at.alicdn.com/t/font_2225171_8kdcwk4po24.ttf') format('truetype'); // 修改前
src: url('./font_2225171_8kdcwk4po24.ttf') format('truetype');
}
/* #endif */官方使用的是阿里云图标库的线上库，将线上库下载到项目中即可
在使用 uni-app 引入 uView 组件时，如果出现 undefined 的问题，可能是由于以下几个原因导致的。你可以按照以下步骤进行排查和解决：
1. 确保正确安装 uView
首先，确保你已经正确安装了 uView。你可以通过以下命令安装 uView：
npm install uview-ui2. 在 main.js 中引入 uView
在 main.js 文件中，确保你已经正确引入了 uView 并进行了配置：
import uView from 'uview-ui';
Vue.use(uView);3. 在 pages.json 中配置 easycom
uView 使用了 easycom 自动引入组件的方式，确保在 pages.json 中配置了 easycom：
{
"easycom": {
"^u-(.*)": "uview-ui/components/u-$1/u-$1.vue"
}
}4. 在页面中使用 uView 组件
在页面中使用 uView 组件时，确保组件的标签名正确。例如，使用 u-button 组件：
<template>
<view>
<u-button type="primary">点击我</u-button>
</view>
</template>5. 检查 uView 版本
确保你使用的 uView 版本与 uni-app 版本兼容。如果版本不兼容，可能会导致组件无法正常显示。
6. 清除缓存并重新编译
有时候，缓存可能会导致组件无法正常加载。你可以尝试清除缓存并重新编译项目：
npm run dev:mp-weixin或者使用 HBuilderX 的 清除缓存并重新编译 功能。
7. 检查网络问题
如果你是通过 CDN 引入 uView，确保网络连接正常，能够正确加载 uView 的资源。
8. 查看控制台错误信息
打开浏览器的开发者工具，查看控制台是否有任何错误信息。错误信息可能会提供更多关于问题的线索。
9. 确保 uView 样式正确引入
确保 uView 的样式文件已经正确引入。你可以在 App.vue 中引入 uView 的样式：
<style lang="scss">
[@import](/user/import) "uview-ui/index.scss";
</style>