uni-app打包项目成h5，遇到本地访问页面空白

最新推荐文章于 2024-07-24 10:14:33 发布
最新推荐文章于 2024-07-24 10:14:33 发布
阅读量2k 收藏 2
点赞数 4
文章标签： 前端 uni-app
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/YourPasser/article/details/134039943
版权
文章讲述了在打包完成后遇到的本地file协议限制问题，通过修改manifest.json的Web配置，将运行基础路径设置为./，解决了在本地直接打开index.html为空白的问题，允许在web服务器环境下访问。
摘要由CSDN通过智能技术生成

打包完成之后,有的时候会出现这样的提示:

注意请部署到web服务器使用，不支持本地file协议打开。不要使用资源管理器直接打开。

直接在本地打开static里面的inedx.html的时候，会出现空白页面

解决办法其实很简单

打开manifest.json文件，打开Web配置。

将运行的基础路径添加一下./

再次在本地打开生成的静态文件夹路径：unpackage/dist/build/h5/index.html，

然后发现可以直接访问了。

wu-lyhower
关注
  • 4
    点赞
  • 踩
  • 2
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
uniapp使用vue3打包H5，android或ios加载白屏
xvzhengyang的博客
06-12 827
但是使用Android或者ios进行本地加载白屏；以Android为例子，将打包后的文件夹存放到asset文件夹下，使用webview的loadUrl加载；按照uniapp官方文档介绍，根据步骤创建了使用Vue3的项目；本地安装了http-server，打包之后的dist文件夹，执行http-server后，可以访问；PS：亲测了一下，使用vue2的项目打包成h5，是没有这个问题的；应该是vue3的打包改动引起的；但是调试发现，白屏；按照网上的教程加了一行代码。重新debug调试，可以正常打开了；
uniapp打包h5项目后网页打开空白
g470641382的博客
05-09 640
5.在刚刚打开的h5文件夹下cmd进入终端。1.在manifest文件下配置路径。6.点击下面出现的网址即可。3.打开打包后生成的。
uniapp打包成H5遇到的坑，本地访问页面空白
努力、拼搏、奋进
11-10 1143
uniapp打包成H5遇到的坑，本地访问页面空白
关于uniapp打包H5后，点击index.html，显示空白页面且找不到chunk-vendors.js的问题
Admin_yws的博客
03-11 2672
直接说解决方案 修改下manifest.json ——> h5配置 ——> 运行的基础路径为：./ 即可
uniapp发布h5空白问题
兄弟连之一个前端小白的成长
03-13 1万+
1.uniapp发布h5页面空白 需要在manifest.json当中配置 "versionCode" : 100, //以下是需要多加配置的代码 "h5" : { "router" : { "base" : "/bagu/" //服务器根目录我存放代码的文件夹 }, "domain" : "你的
uniapp打包发布h5(打包之后页面空白问题)
weixin_51014776的博客
08-31 1477
uniapp打包发布h5(打包之后页面空白问题)
uniapp解决h5打包空白的问题
weixin_53633256的博客
10-10 1594
在manifest.json配置基础路径为./
uniapp打包成H5本地访问页面空白
qq_43549505的博客
09-02 4087
uniapp打包成H5遇到的坑,本地访问页面空白 需要在manifest.json修改成截图的配置， 修改发布后页面就正常显示出来了 "h5" : { "title" : "test", "router" : { "mode" : "hash", "base" : "./" }, "publicPath":"./", "domain" : "http://www.baidu.cn" }
uniapp打包H5在本地运行出现页面空白，控制台报错现象
qq_56149957的博客
04-20 2293
最后点击下面出现的地址就可以访问了。执行 http-server。控制台报错，页面空白没有内容。原因：这里出现了跨域问题。
uni-app 打包为 H5 并上传服务器
01-08
本文主要介绍如何将uni-app项目打包为H5版本，并将其部署到Web服务器上。 **配置步骤** 1. **备份代码**：在进行打包操作前，为了防止意外情况导致源代码受损，建议先复制一份项目代码作为备份。 2. **修改...
uni-app项目本地离线android打包步骤
04-22
【uni-app项目本地离线Android打包步骤详解】 uni-app是一个多端开发框架，允许开发者编写一次代码，跨平台运行在iOS、Android、Web等不同端上。然而，对于Android平台的离线打包，官方文档可能不够详尽，使得...
uni-app项目练习2
05-16
通过这个“uni-app项目练习2”，你可以逐步掌握uni-app的开发流程，从基本页面构建到复杂功能实现，提升跨平台开发能力。同时，也可以将所学应用到实际项目中，为今后的移动应用开发打下坚实基础。
基于uni-app开发的微信小程序商城项目
08-03
此项目是基于uni-app开发的微信小程序商城项目，开发工具用的是Hbuilder和微信开发者工具，前端用的vue3.0,后台的数据用的是用node搭建的本地服务器，通过内网穿透的方式进行数据外网访问的方式，只局限做开发和测试...
uni-app 打包H5时,访问index.html页面白屏报错net::ERR_ABORTED 404
最新发布
weixin_45389051的博客
07-24 162
【代码】uni-app 打包H5时,访问index.html页面白屏报错net::ERR_ABORTED 404。
uniapp项目打包成H5,index页面运行为空白
weixin_55553121的博客
03-02 6331
开发做的是app项目，需要吧项目打包成H5,在本地运行，H5打包完成之后，index页面运行为空白页面 1.下载nginx nginx: download 2.将自己的H5打包好的文件夹，压缩放到nginx 里面的html里面，其他的文件删掉 3.双击nginx.exe（只要双击一下就行了） 4.在浏览器上面打开 localhost:端口/h5 就可以了 ...
uni-app运行时没有报错，H5端显示页面为空白，APP端和小程序端显示正常
lingliu0824的博客
02-11 7214
修改了App.vue后运行在浏览器中页面显示为空白了，但是APP端和小程序都还是正常显示。 原因：在App.vue中不能包含template标签，相当于App.vue里面只能写script脚本和公用的style样式。
uniapp踩坑笔记——H5端打包之后页面空白/配置基础路径/相对路径
热门推荐
没沙发
07-11 2万+
需求 使用静态文件便可以访问项目，不需要部署到服务器上。 遇到的问题
uni-app打包app嵌套h5跳转外部链接启用物理返回键
04-04
在uni-app中，可以通过uni.navigateBack() 方法来实现物理返回键的功能，该方法可以使应用退回到上一个页面或关闭当前页面。 如果需要在嵌套H5页面中使用物理返回键，则需要在H5页面中监听浏览器的返回事件，并在事件中调用uni.navigateBack()方法。 具体实现步骤如下： 1. 在H5页面中添加返回事件监听器： ``` window.addEventListener('popstate', function() { uni.navigateBack(); }); ``` 2. 在uni-app中，通过uni.createWebView()方法打开H5页面，并传递一个自定义参数isWebView=true，用于标识当前页面是在webview中打开的。 ``` uni.createWebView({ url: 'http://example.com', extras: { isWebView: true } }) ``` 3. 在uni-app的首页（即嵌套H5页面的父页面）中监听物理返回键事件，并判断当前页面是否是在webview中打开的，如果是则调用webview的goBack()方法，否则调用uni.navigateBack()方法。 ``` onBackPress() { const pages = getCurrentPages(); const currentPage = pages[pages.length - 1]; if (currentPage.$page.meta.isWebView) { const webview = plus.webview.getWebviewById(currentPage.id); if (webview.canBack()) { webview.goBack(); } } else { uni.navigateBack(); } } ``` 通过以上步骤，即可实现在uni-app打包的app中嵌套H5页面并启用物理返回键的功能。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值