uniapp打包成H5遇到的坑，本地访问页面空白

最新推荐文章于 2024-04-22 18:41:55 发布
最新推荐文章于 2024-04-22 18:41:55 发布
阅读量9.4k 收藏 16
点赞数 1
文章标签： java python vue php linux
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_36538012/article/details/107333965
版权

1：点击菜单栏发行，点击选择网站-H5手机版，

2：在网站域名这一栏填写，网站域名，例如www.xxx.com或者你的服务器的IP地址47.103.XX.XX，（这个地址是你将项目打包之后存放放静态文件的地址）。

我这里为了考虑到安全因素，将自己的服务器地址马赛克了。

image

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

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

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


打开控制台也会发现有相对应的报错

Failed to load resource: net::ERR_FILE_NOT_FOUND
chunk-vendors.0d20bc70.js:1 Failed to load resource: net::ERR_FILE_NOT_FOUND
index.09d605c0.js:1 Failed to load resource: net::ERR_FILE_NOT_FOUND
解决办法其实很简单

点击高级按钮，进入到manifest.json的h5配置里面，根据自己的情况配置一些信息，我这里是默认的。

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

再次在本地打开生成的静态文件夹static/index.html,发现可以直接访问了

祈澈菇凉
关注
  • 1
    点赞
  • 踩
  • 16
    收藏
    觉得还不错? 一键收藏
  • 2
    评论
uni-app 打包为 H5 并上传服务器
01-08
前言 我主要是用 uni-app 来写安卓端，近日需要将程序打包为 H5 放到 web服务器 上，经过一番折腾。 配置 在开始之前，推荐你先【拷贝】一份代码，防止打包出现问题导致代码受损。 在你的项目文件中找到 manifest.json ，打开并作如图配置： 运行的基础路径 如果你写的是 “ /H5/ “ ，那么你的服务器中要建立一个 H5 文件夹。 发行时启动摇树优化 功能是去掉无用代码与僵尸代码，但勾选时要慎重。 发行(打包) 依次点击菜单 → 发行 → 网站-h5手机版，然后弹出对话框，请做如下配置： 最后点击 发行 ，控制台会显示打包日志。 查看包 打包成功后，控制台会给出如下类
uniapp的移动端h5的横屏电子签名
06-01
由于uniapp微信小程序支持横竖屏切换配置，但是移动端h5不支持。自定义一个h5页面，实现可以横屏手写电子签名的功能，且支持回显（图片可以转化为签字版的canvas，且支持在此基础上继续进行手写签名）由于uniapp微信小程序支持横竖屏切换配置，但是移动端h5不支持。自定义一个h5页面，实现可以横屏手写电子签名的功能，且支持回显（图片可以转化为签字版的canvas，且支持在此基础上继续进行手写签名）由于uniapp微信小程序支持横竖屏切换配置，但是移动端h5不支持。自定义一个h5页面，实现可以横屏手写电子签名的功能，且支持回显（图片可以转化为签字版的canvas，且支持在此基础上继续进行手写签名）由于uniapp微信小程序支持横竖屏切换配置，但是移动端h5不支持。自定义一个h5页面，实现可以横屏手写电子签名的功能，且支持回显（图片可以转化为签字版的canvas，且支持在此基础上继续进行手写签名）由于uniapp微信小程序支持横竖屏切换配置，但是移动端h5不支持。自定义一个h5页面，实现可以横屏手写电子签名的功能，且支持回显（图片可以转化为签字版的canvas，且支持在此基础上继续进行
关于uniapp打包H5后，点击index.html，显示空白页面且找不到chunk-vendors.js的问题
Admin_yws的博客
03-11 2479
直接说解决方案 修改下manifest.json ——> h5配置 ——> 运行的基础路径为：./ 即可
uniapp打完包报Failed to load resource: net::ERR_FILE_NOT_FOUND
2201_75410538的博客
03-14 218
在manifest.json内找到web配置修改运行的基础路径。
uniapp打包发布h5(打包之后页面空白问题)
weixin_51014776的博客
08-31 1072
uniapp打包发布h5(打包之后页面空白问题)
uniapp解决h5打包空白的问题
weixin_53633256的博客
10-10 1517
在manifest.json配置基础路径为./
UNI-APP H5应用白屏（空白页）解决方案
热门推荐
云间月
01-31 1万+
UNI-APP H5应用白屏（空白页）解决方案 写在前面         最近公司有一些临时业务急需上线，考虑到H5应用测试部署的便捷性，因此从技术上采用H5网页的方式快速响应业务的需求，由于自己对uni-app 比较熟悉，之前也有用过uni-app开发过微信小程序，整理体验都还不错，这次也就采取uni-app开发H5应用，结果开发测试都还好，上线之后部分IOS用户反馈应用无法打开，具体现象表现为链接打开显示空白页、白屏。针对这
uniapp打包h5，白屏并报错Failed to load resource: net::ERR_FILE_NOT_FOUND
qq_48129943的博客
07-25 2379
配置manifest.json>h5配置中的运行基础路径，和manifest.json>源码视图中base保持一致即可。重新打包，进入就可以了。
记录uniapp打包app过程以及遇到的空白问题
m0_64816413的博客
08-03 4594
对象在移动端的uni-app中不存在，因为uni-app是基于WebView来运行的所以会报错 我们把它注释掉 因为在app中咱们也不用担心用户没有登录 通过地址栏跳转页面的这种情况。打包完成后你的目录会生成一个unpackage文件夹 下面会有一个apk文件夹 里面就是apk的包，我们把他安装到手机上就可以啦。紧接着回到我们的Hbuilder 在操作栏找到 运行->运行到手机或者模拟器->运行到安卓基座。解释一下 这段代码在h5上是可以正常运行的 但是这段代码在uni-app真机调试时报错的原因是。
net::ERR_FILE_NOT_FOUND错误：访问的文件不存在
qq_44427343的博客
08-25 1万+
一般情况下都是路径问题 找到报错内容的具体路径，进行查看，排查错误
vue项目打包后白屏或者报错Failed to load resource: net::ERR_FILE_NOT_FOUND以及图标为小方框
YourMoonLight的博客
07-24 4209
一、在做完项目之后直接执行npm run build命令，出现空白 1、打包后的dist目录下的文件引用路径不对，会因为找不到文件而报错导致白屏 解决办法： 修改一下config下面的index,js中Build模块导出的路径 因为index.html里边的内容都是通过script标签引入的，而你的路径不对，打开肯定是空白的：assetsPublicPath默认的是’/’也就是根目录，而我们的index.html和static在同一级目录下面，所以要改为’./’ 2、由于把路由模式mode设置成histo
uniapp项目打包成H5,index页面运行为空白
weixin_55553121的博客
03-02 6154
开发做的是app项目，需要吧项目打包成H5,在本地运行，H5打包完成之后，index页面运行为空白页面 1.下载nginx nginx: download 2.将自己的H5打包好的文件夹，压缩放到nginx 里面的html里面，其他的文件删掉 3.双击nginx.exe（只要双击一下就行了） 4.在浏览器上面打开 localhost:端口/h5 就可以了 ...
uniapp 微信H5分享 下载就能用
12-15
针对uniapp 微信H5分享，我已经封装好，非常方便好用，有需要的朋友可以去下载，更多详细使用内容可以看我的博客https://blog.csdn.net/nihao123456789222/article/details/121954495
将本地图片(h5页面)映射到页面访问地址
04-30
将本地图片(h5页面)映射到页面访问地址
uniapp移动端H5在线预览PDF等文件实现源码及注解
10-13
uniapp移动端H5在线预览PDF等文件实现源码及注解：https://a-jing.blog.csdn.net/article/details/120744302
【1524】java投票管理系统Myeclipse开发mysql数据库web结构java编程计算机网页项目
qq_251836457的博客
04-18 646
2、开发环境为TOMCAT7.0,Myeclipse8.5开发，数据库为Mysql5.0，使用java语言开发。(5)投票选项管理：对投票选项信息进行添加、删除、修改和查看。(6)投票记录管理：对投票记录信息进行添加、删除、修改和查看。(1)管理员管理：对管理员信息进行添加、删除、修改和查看。(2)用户管理：对用户信息进行添加、删除、修改和查看。(3)公告管理：对公告信息进行添加、删除、修改和查看。(4)投票管理：对投票信息进行添加、删除、修改和查看。4）投票浏览查看、查看投票、投票记录。
ReentrantLock
最新发布
Adepth的博客
04-22 609
这是标准库给我们提供的另一种锁，前面我们学到的一种是顾名思义，Reentrant:可重入的 但我们也知道，synchronized锁不也是可重入的嘛?那这个锁到底有什么其他的过人之处呢？
Web前端 Javascript笔记5
cycyzh的博客
04-18 840
script>'console.log("哈哈哈佳人们好困")'}, 3000)​let t1 = setTimeout('console.log("你们看到这句话的时候我早已身价百万！！")', 4000)​</script>3秒，四秒后出来的东西，出现前会返回计时器编号。
2.8 构建gradle环境
蚊者逆袭的博客
04-18 2156
Gradle是一种现代化的构建工具，用于自动化地构建、测试和部署软件项目。它是一种基于JVM（Java虚拟机）的构建工具，最初是为了解决Apache Ant和Apache Maven等传统构建工具的一些限制而开发的。
将uniapp打包成h5后用cordova打包
07-13
你可以按照以下步骤将uniapp打包成H5，并使用Cordova进行打包： 1. 首先，将uniapp项目编译为H5版本。在你的uniapp项目根目录下，运行以下命令： ``` npm run build:h5 ``` 这将生成一个dist目录，其中包含了H5版本的代码。 2. 创建一个Cordova项目。在你的工作目录下，运行以下命令： ``` cordova create <your_project_name> ``` 这将创建一个新的Cordova项目文件夹。 3. 进入Cordova项目文件夹，并添加H5平台。运行以下命令： ``` cd <your_project_name> cordova platform add browser ``` 这将添加一个名为browser的平台，用于打包H5版本。 4. 将H5版本的代码复制到Cordova项目的www目录下。运行以下命令： ``` cp -R <uniapp_project_path>/dist/* www/ ``` 其中，`<uniapp_project_path>`是你的uniapp项目的路径。 5. 运行Cordova项目。运行以下命令： ``` cordova run browser ``` 这将在浏览器中运行你的Cordova项目，并将uniapp的H5版本显示出来。 注意：在使用Cordova打包之前，请确保已经正确配置了Cordova环境，并安装了所需的插件和平台。 希望以上步骤对你有帮助！如果还有其他问题，请随时提问。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 2
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值