uniapp 引入组件踩坑：引入组件后，h5可以正常显示，但是打包后不显示

最新推荐文章于 2025-06-11 11:18:43 发布
原创 最新推荐文章于 2025-06-11 11:18:43 发布 · 891 阅读 · 0 ·
CC 4.0 BY-SA版权
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
文章标签：

#uni-app #前端 #javascript

文章讨论了在Vue项目中引入组件后，代码从`<scriptsetup>`到`import`方式的修改，导致在打包后H5页面上组件无法正常显示的问题及其解决方案。

摘要生成于 C知道 ，由 DeepSeek-R1 满血版支持， 前往体验 >

引入组件后，h5可以正常显示，但是打包后不显示

原代码如下

  components: {
    cityCode: () => import("@/components/cityList/cityCode.vue"),
  },

修改后可以正常显示

import cityCode from "@/components/cityList/cityCode.vue"
………
  components: {
    cityCode
  },
lengxiaoying
关注
记录解决uniapp使用uview-plus在vue3+vite+ts项目中打包后样式不能显示问题
陈万洲的专栏
02-22 3389
1. 这里的Vue本地运行正常打包后样式无法正常显示，是由于用npm导入了一部分uniapp的@dcloudio类库，和HBuilder自带的@dcloudio一起用导致版本不一致导致的问题。2. 我们在升级迁移项目中遇到问题，还是要深入分析源码，能帮助我们理解底层原理和快速定位解决问题。
uniapp兼容微信小程序和支付宝小程序遇到的坑
RainHg的博客
07-26 6781
支付宝不支持v-show；v-html；支付宝导航栏差异；支付宝不兼容uni.createSelectorQuery().in中的in；支付宝客服相关；uniapp小程序超出限制；uniapp require 绝对路径引入文件报错“文件查找失败”；SyntaxError: Unexpected token } in JSON at position
uni-app 组件莫名其妙显示不出来
lx233
12-06 1970
别用开发工具自带的查看，用浏览器的查看，发现编译完之后，莫名其妙被加了一层display none查找后无元素设置，猜想可能是相关类名冲突导致，此时多移动下元素位置，放到外层去看是否可行
uniapp 调试时页面正常显示，打包后页面空白，不显示
咦~地瓜
05-27 9309
uniapp 调试时页面正常显示，打包后页面空白，无法显示。
uniapp vue3 打包移动端 push消息推送 unipush1.0小图标打包不显示问题
最新发布
nanianhuakaiyue的博客
06-11 371
在这里插入图片描述](https://i-blog.csdnimg.cn/direct/49caec0e49294d27809a8ed8343b96d4.jpeg#pic_center。问题描述：uniapp vue3 打包移动端 push消息推送 unipush1.0小图标打包不显示问题,更换图片修改图片地址都实验过不行。解决方案，目前测试结果：HBuilder X 之前用的是4.36版本的不行，后改成4.29和4.24打包后都可以正常显示小图标。
uniapp打包h5项目后网页打开空白
m0_73146522的博客
01-09 2827
5.在刚刚打开的h5文件夹下cmd进入终端。1.在manifest文件下配置路径。3.打开打包后生成的h5文件夹。6.点击下面出现的网址即可。
解决uniapp打包h5后，图片显示不出来的问题
weixin_44431073的博客
05-17 2295
使用uniapp开发h5页面，发行后，在正式环境中图片加载不出来，但是本地是正常的。在需要使用路径的地方，这样写。
营运管理UNIAPP项目踩坑和填坑之旅.docx
10-15
离线打包虽然方便，但不支持unipush推送功能，因此推荐使用在线云打包。对于Android，使用云打包的公用证书即可满足一般项目需求。 通过以上分享，我们可以看到uni-app在实际开发中的灵活性，但同时也需要注意各个...
小程序嵌套h5页面_uni-app 中使用 web-view 微信小程序嵌套H5
weixin_39797693的博客
12-19 3521
uni-app 中使用 web-view 微信小程序嵌套H5由于项目需要，我们的小程序中嵌套了web-view， 对于第一次接触uni-app，第一次用web-view的我真的是踩坑无数，屡次站在放弃的边缘，终于在今天搞定了。所以我感觉有必要更新一篇关于uni-app中嵌套web-view的文章，希望下面的文章可以帮助到正在学习的朋友吧。1、uni-app 中为什么要嵌套 web-view ？2、...
跨平台应用开发进阶(六十一)：uni-app 跨平台技术开发框架可行性调研_开发一个uniapp项目的社会可行性分析
2401_84446919的博客
05-04 1082
答：代码同步至本地真机调试，或使用虚拟机。答：视SDK提供方是否支持全平台，若H5端的神策sdk被小程序包裹再被app包裹，应用间属于跳转关联关系，只要集成H5端的神策sdk。答：未进行技术预研。答：uni-app答：支持，使用 uni-app 开发跨终端应用，可将代码编译到iOS、Android、微信小程序等多个平台，升级时也需考虑多平台同步升级。其中，uni-app发布为小程序的升级模式较简单，只需将开发完的代码提交小程序后台，待审核通过后用户将自动升级。uni-app。
前端框架-小程序uniApp
aming小老弟
12-03 1179
获取集合Collection示例如下。nosql 非关系型数据库。
uniapp打包 H5 样式失效以及隐藏H5的顶部导航栏
m0_58293192的博客
07-18 1872
uniapp打包 H5 样式失效以及隐藏H5的顶部导航栏
UNI-APP的H5模式，picker-view不显示问题
CommonBorage
04-15 2852
废话不说。直接上解决方法。 在页面中，添加以下css即可。 uni-picker-view { display: block; } uni-picker-view .uni-picker-view-wrapper { display: flex; position: relative; overflow: hidden; height: 100%; background-color: white; } uni-picker-view[hidden] { di...
html5+app（将vue打包成为APP遇到的问题）
qq_44538773的博客
04-02 2636
一、不存在跨域问题 HTML在打包成APP以后(经测试),在手机上可以实现跨域请求得到数据 然而在电脑上测试的时候,仍然存在跨域,因为跨域拦截是浏览器的行为. ...
uniapp打包后样式失效
多说无益的蜡笔头
02-29 1754
资源虽然可以访问，但是样式却失效了，原因是使用了scss，但是sytle标签中没有声明。本地调试完成的项目，显示一切正常，打包后部署目录为直接目录时也正常。manifest.json文件设置Web配置的运行基础路径。因为项目调整，将部署目录加了一层之后开始出现问题。
[uni-app] 微信小程序 - 组件找不到/导入报错 (分包问题导致)
iOSTianNan的博客
07-24 6447
我们先来假设一个场景,如果小程序进行了分包操作, 其中有个公共组件需要被各个。尝试了清缓存\重启\删项目等一些列操作均无效。,本身是被分包处理了, 他是作为子包存在的(这个子包中, import同级别的子报。依赖使用, 那显然我们会将该组件放置在。由于项目刚接手,还未仔细观察分包结构,上面两个路径中, 都存在一模一样的。切换了个路径下的组件, 导入失败,, 就会出现导入报错失败的提示,这也说明了, import。组件的import的父组件。这里的问题就出在了分包,
uni-app开发小程序以及安卓app，自定义组件在安卓机不显示之踩坑系列
前端泡面人
11-24 1938
uni-app开发小程序以及安卓app，自定义组件在安卓机不显示之踩坑系列
uni-app运行时没有报错，H5端显示页面为空白，APP端和小程序端显示正常
lingliu0824的博客
02-11 8064
修改了App.vue后运行在浏览器中页面显示为空白了，但是APP端和小程序都还是正常显示。 原因：在App.vue中不能包含template标签，相当于App.vue里面只能写script脚本和公用的style样式。
uni-app打包后安卓不显示地图及相关操作详解
会飞的猪0629
08-22 3573
uni-app在浏览器调试map地图正常，但是打包后安卓端不显示的问题解决
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值