uniapp打包为H5后怎样在本地运行

最新推荐文章于 2024-05-11 08:00:00 发布
最新推荐文章于 2024-05-11 08:00:00 发布
阅读量6.4k 收藏 16
点赞数 4
分类专栏： uniapp 文章标签： uni-app
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_45942606/article/details/121488176
版权

1.先完成H5相关配置
在这里插入图片描述
2.点击对应的H5网页发行
在这里插入图片描述
3.点击发行
在这里插入图片描述
4.发行后在控制台就会看到如下界面，点击箭头指引的地方
在这里插入图片描述
5.就会进入到下面，但此时在本地浏览器打开不了的
在这里插入图片描述

6.先在该项目的终端全局安装 npm install http-server -g
在这里插入图片描述
7.然后进入H5文件夹的终端，输入http-server在这里插入图片描述
8.然后在本地浏览器中输入上面图片红圈地址就可以了

@少年啊
关注
  • 4
    点赞
  • 踩
  • 16
    收藏
    觉得还不错? 一键收藏
  • 2
    评论
专栏目录
uni-app学习07 在H5上运行
qq_51575392的博客
07-06 257
右侧导航栏vue.config.js - devServer.proxy，在target处修改。修改了request.js文件，引用base.js，修改url，使主页的引用更加简洁。修改了home.vue中的导航栏的部分样式，确保H5页面上导航栏显示正常。主页home.vue引用修改。
uni-app 打包h5注意事项
热门推荐
雨竹的博客
09-12 2万+
uni-app在打包成h5时，默认是不支持直接打开的，因为打包出来是 （/xxx/xxx）这种格式，这点和vue-cli3.0是一致的，在用vue-cll3.0时打包我们会想到在vue.config中配置publicPath,把它配置成（./），但是你在uni-app中是找不到这个文件的，其实在uni官网是有提到publPath，但是说的并不明确（https://uniapp.dcloud.i...
uni-app&H5&Android混合开发三 || uni-app调用Android原生方法的三种方式
最新发布
技术杂谈，聚焦优质文章、开源项目、实用工具和学习、工作、面试心得分享。博客园推荐博客、阿里云专家博主，擅长于C#、.NET、.NET Core、Golang、TypeScript、Vue、Uni App、Angular开发。
05-11 1696
关于H5的调用Android原生方法的方式有很多，在该片文章中我主要简单介绍三种与Android原生方法交互的方式。uni-app跨平台框架介绍和快速入门要实现Android与H5互调，WebView是一个很重要的控件，WebView可以很好地帮助我们展示html页面,所以有必要先了解一下WebView。
uni-app打包项目成h5，遇到本地访问页面空白
YourPasser的博客
10-25 1788
直接在本地打开static里面的inedx.html的时候，会出现空白页面。
uniapp打包为H5并且在本地运行
qq_44871531的博客
05-24 3405
3.全局安装npm install http-server -g。在文件夹目录下,输入cmd,回车可直接打开终端,并定位到该目录。5.运行终端:http-server。首先记录一下一个便捷操作。6.游览器输入网址即可。2.找到项目的根目录。
鲁班-h5带你把项目跑起来
weixin_44198546的博客
10-12 1549
贴个咱掘金鲁班h5的作者写的文章直接进入主题，刚接触的童鞋怎么把项目跑起来呢？
Uni-app h5应用开发到部署
weixin_59525835的博客
02-04 1764
注意只能扩展web和小程序平台，不能扩展app打包。并且扩展小程序平台时只能基于指定的基准平台扩展子平台，不能扩展基准平台。打包完成后如果想在本地预览，需要在该项目的终端全局安装 npm install http-server -g。本地运行时可以点击运行到浏览器-》chrome即可打开h5应用页面进行调试。2、配置完H5后点击发行，选择自定义发行-》build:pro。1、打开manifest.json文件配置H5。项目中会生成打包文件，但是本地运行不起来。扩展节点，可实现自定义条件编译平台。
Uniapp如何运行H5浏览器端
qq_41791604的博客
06-09 2101
在Hbuilder中选择【运行】->【运行到浏览器】->【配置web服务器】->【浏览器运行配置】 ->【chrome浏览器安装路径】-> 【浏览】->【选择浏览器】在Hbuilder中选择【运行】->【运行到浏览器】-> 【chrome】
使用真机访问 本地开发的H5项目
qq_41022872的博客
03-20 860
使用真机访问 本地开发的H5项目 最近我leader让我维护一下我们官网（这也是我第一次接触H5项目），哼哧哼哧Ctrl+C,Ctrl + V了几天，总算是搞完了，但是我想用真实的手机测试一下UI，看看效果啥的。一时间有些不知所措，遂百度（有人说，哎呀，你发布测试环境测试一下啊，那也太麻烦了把，下面我准备介绍一个更简单的办法） 简单的说就是，在电脑上启一个服务，然后手机和电脑在同一局域网的情况下，...
uniapp开发，打包成H5部署到服务器
maoge_666的博客
04-14 1万+
前端使用uniapp开发项目完成后，需要将页面打包，生成H5的静态文件，部署在服务器上。 这样通过服务器链接地址，直接可以在手机上点开来访问。
uni-app 打包为 H5 并上传服务器
01-08
我主要是用 uni-app 来写安卓端，近日需要将程序打包为 H5 放到 web服务器 上，经过一番折腾。 配置 在开始之前，推荐你先【拷贝】一份代码，防止打包出现问题导致代码受损。 在你的项目文件中找到 manifest.json ，...
在uniapp做高德地图，发布为h5网页
11-14
在uniapp做高德地图，发布为h5网页，内嵌入安卓app中，代码摘要，不含敏感信息在uniapp做高德地图，发布为h5网页，内嵌入安卓app中，代码摘要，不含敏感信息
uniapp打包h5后自定义配置文件可修改 的操作方法
06-22
uniapp打包h5后自定义配置文件可修改 的操作方法
uniapp的移动端h5的横屏电子签名
06-01
自定义一个h5页面，实现可以横屏手写电子签名的功能，且支持回显（图片可以转化为签字版的canvas，且支持在此基础上继续进行手写签名）由于uniapp微信小程序支持横竖屏切换配置，但是移动端h5不支持。自定义一个h5...
uniapp 微信H5分享 下载就能用
12-15
针对uniapp 微信H5分享，我已经封装好，非常方便好用，有需要的朋友可以去下载，更多详细使用内容可以看我的博客https://blog.csdn.net/nihao123456789222/article/details/121954495
在手机中运行H5项目
NanChen的博客
03-02 1118
1、首先获取id地址 win+R/输入cmd/输入ipconfig 2、截取到IP地址，放在Vue项目中 3、手机和电脑连接同一个wifi 4、启动后复制链接到草料二维码中生成可用二维码，扫描即可 （如果二维码打不开，需要把防火墙给关掉） ...
Hbuilder创建的H5项目离线环境下运行与打包
weixin_62368440的博客
07-12 1598
H5,离线,uniapp
微信html5开发
easy0919的博客
07-03 4469
日常生活中，我们经常使用微信，在微信中我们常常看到一些转载内容是动态的还有音乐。你是否还不会这种操作呢，这种操作只需要简单的html5就可以shi'xian
【Vue H5项目实战】从0到1的自助点餐系统—— 搭建脚手架(Vue3.2 + Vite + TS + Vant + Pinia + Node.js)
白洞，白色的明天在等着我们
07-11 5329
H5 项目基于 Web 技术，可以在智能手机、平板电脑等移动设备上的浏览器中运行，无需下载和安装任何应用程序，且H5 项目的代码和资源可以集中在服务器端进行管理，只需更新服务器上的代码，即可让所有顾客访问到最新的系统版本。本系列将以肯德基自助点餐页面为模板，搭建一款自助点餐系统，第一次开发移动端h5项目，免不了有所差错和不足，欢迎各位大佬指正。Vue3.2 + Vite + TS + Vant + Pinia + Node.js + MongoDB
将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、付费专栏及课程。

余额充值