解决vue3，cli4用uniapp打包app出现白屏问题

最新推荐文章于 2024-06-28 09:43:18 发布
最新推荐文章于 2024-06-28 09:43:18 发布
阅读量2.1k 收藏 5
点赞数 3
分类专栏： App 文章标签： vue.js
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/ll010705/article/details/116381281
版权
本文介绍了如何解决使用Vue3和CLI4构建的项目通过UniApp打包成APP后出现白屏的问题。主要步骤包括在Vue3项目根目录创建vue.config.js，将项目打包为dist，然后在UniApp项目中替换相关文件，并对manifest.json进行配置，最终成功打包无广告应用。
摘要由CSDN通过智能技术生成

解决vue3，cli4用uniapp打包app出现白屏问题

问题描述：

用VScode制作的vue3项目，用uniapp打包APP后，出现白屏（没有报任何错误）

解决办法：

在vue3原项目的根目录（与packa.json同级）下创建vue.config.js文件夹，配置如下

在这里插入图片描述

然后npm run build打包成dist文件夹

打开uniapp创建一个5+App（A）项目

在这里插入图片描述

删除css,img,js和index.html文件替换为打包后的dist（我这里自己改为了dists，可以不用改）文件

![在这里插入图片描述](https://img-blog.csdnimg.cn/20210503220033907.png

最低0.47元/天 解锁文章
ღBug killer&
关注
专栏目录
uni-app打包白屏问题，进不去页面
zheyuan1278的博客
10-28 2196
写好的代码转圈圈甚至连页面也没进。最后得到解决办法` "app-plus" : { "usingComponents" : true, "nvueStyleCompiler" : "uni-app", "runtimeVersion" : 3, "compilerVersion" : 3, "splashscreen" : { "alwaysShowBeforeRender" : false,
uniapp使用vue3打包H5，android或ios加载白屏
xvzhengyang的博客
06-12 1183
但是使用Android或者ios进行本地加载白屏；以Android为例子，将打包后的文件夹存放到asset文件夹下，使用webview的loadUrl加载；按照uniapp官方文档介绍，根据步骤创建了使用Vue3的项目；本地安装了http-server，打包之后的dist文件夹，执行http-server后，可以访问；PS：亲测了一下，使用vue2的项目打包成h5，是没有这个问题的；应该是vue3的打包改动引起的；但是调试发现，白屏；按照网上的教程加了一行代码。重新debug调试，可以正常打开了；
解决vue build打包之后首页白屏的问题
08-27
下面小编就为大家分享一篇解决vue build打包之后首页白屏的问题，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
解决uni-app vue3 nvue中使用pinia页面空白问题，让你的应用更稳定！
w708955424的博客
02-26 788
然而，在实际开发过程中，我们有时会遇到一个奇怪的问题：在使用pinia后，nvue页面会出现空白的情况。在使用pinia后，我们有时候会发现nvue页面出现了空白，这可能是由于pinia与nvue的兼容性问题导致的。在nvue中，我们需要通过Vue.use()来安装pinia插件，但是在Vue3中，这种方式并不适用。为了在nvue中使用pinia，我们可以使用vuex-composition-helpers插件进行状态管理，这个插件可以帮助我们在Vue3的composition API中使用Vuex。
uni-app运行到安卓模拟器白屏问题
最新发布
by_Ftao的博客
06-28 813
1.如果是首次加载白屏,二次编译正常的情况,可能是pages.json里设置的第一项(应用启动页)有问题,可以更换测试下.如果出现如上情况,建议升级下HBuilderX版本后再启动App]2.cpu模式选择不对,uni-app官网给出的说明;3.出现SDK与cli版本不匹配。
uniapp 云打包后IOS白屏，真机调试也是白屏，没有报错！解决办法
weixin_62247681的博客
12-14 8001
App下开启分包，除在pages.json中配置分包规则外，还需要在manifest中设置在app端开启分包设置，详见：https://uniapp.dcloud.io/collocation/manifest?4. 如果是深色背景的页面，加载时背景色出现缓慢，参考：https://uniapp.dcloud.io/performance?在小程序启动时，默认会下载主包并启动主包内页面，当用户进入分包内某个页面时，会把对应分包自动下载下来，下载完成后再进行展示。分包加载配置，此配置为小程序的分包加载机制。
uni-app,打包后白屏
luozaiyong的博客
09-07 4846
uni-app,打包后白屏 问题描述： uni-app，云打包后，运行首页白屏，然后各种百度，也没找到有用的，后面真机调试发现有报错view.umd.min.js:1，然后就在页面注释代码，发现是uniapp获取元素createSelectorQuery报错问题，也就是获取节点的问题，一定要在onReady()钩子函数调用 // 获取设备高度 getHight() { const vm = this; uni.getSystemInfo({ //调用uni-app接口获取屏幕高度
关于uniapp中打包白屏
8月13日
10-23 5577
在项目完成提交审核中，打回两次都是因为白屏，我在真机上，还有模拟机上都是正常的，也很纳闷，后来在体验版上自己测试时，发现也是白屏，所以，知道打回的具体原因 报错图 这是在苹果版上的错误，安卓上面就是报 后面百度，谷歌后，最终察觉原因应该在字体图标上 然后我一个个删除，发现是因为iconfont.js文件的存在， 把iconfont.js文件删除，在提交，就审核通过了 ...
uniapp小程序体验版-白屏现象
RD_Xiaobai的博客
08-01 9952
uniapp微信小程序体验版出现白屏现象，原因以及解决方法，亲测有效
详解Vue-cli3 项目在安卓低版本系统和IE上白屏问题解决
10-17
在使用 Vue-cli3 创建的项目中，可能会遇到在安卓低版本系统或 Internet Explorer（IE）浏览器上出现白屏的问题。这通常是由于这些老旧平台不支持 ES6 以上的语法和某些新特性导致的。为了解决这个问题，我们需要...
快速解决vue2+vue-cli3项目ie兼容的问题
01-18
先根据这篇文章修改 详解Vue-cli3 项目在安卓低版本系统和IE上白屏问题解决 如果没有其他问题是可以了的，下面是我代码中出现的其他问题导致页面无法显示或者报错 sockjs报错 控制台会一直报这个错，sockjs-node 是...
VUE CLI 4.x 打包成APP后白屏解决办法&&打包APP教程
FUTURE的博客
11-22 1892
一般用VUE打包项目后，再把项目打包成APK安装包，在手机上打开应用我们会发现打开是一片白，这是什么原因呢？ 路由模式为history模式。 资源的路径不对。默认情况下，Vue CLI 会假设你的应用是被部署在一个域名的根路径上，而我们打包成应用时应把路径修改为相对路径，这样所有的资源都会被链接为相对路径，这样打出来的包可以被部署在任意路径。 接下来就教大家如何把VUE项目打包成APK 用VUE CLI创建项目vue create demo 选择Manually select features自
uniapp中页面白屏问题
fairyfree的博客
07-19 3705
uniapp 页面白屏现象
uniapp 手机模拟测试app白屏问题
热门推荐
颜良文丑的博客
06-15 1万+
uniapp中当运行到手机或模拟器中的时候出现了白屏的现象 控制台显示到 应用【xxx xxx】已启动 . . .就没了下文。这时候该怎么处理？
uniapp嵌套webview页面时，出现白屏
weixin_52563146的博客
08-16 5127
uniapp嵌套webview出现白屏 webview和uniapp传值交互
uniapp打包发布ios-app出现白屏被退回
qq_43869364的博客
03-04 982
2、pages.json中配置了分包，取消掉即可解决正式版ios白屏问题，在自定义包或者真机是测不出来的。1、使用了pinia，并且在首页或者App.vue页面setup data域中直接使用pinia。4、缺失文件，请仔细检查引入的文件是否此存在或者第三方库文件是否齐备。3、代码错误导致了页面卡死不能正常出现页面，需要仔细检查代码。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值