如何将uniapp开发的H5打包并部署到服务器

最新推荐文章于 2024-06-26 17:34:45 发布
最新推荐文章于 2024-06-26 17:34:45 发布
阅读量1.8k 收藏 7
点赞数 1
文章标签： uni-app
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_46022193/article/details/117933495
版权
本文详细介绍了如何使用Hbuilder X将uni-app项目打包成H5，并部署到服务器。步骤包括设置网站标题和域名，配置运行基础路径，选择hash路由模式，打包后通过Xftp上传至服务器，修改目录权限，以及解决访问404或空白问题的排查方法。
摘要由CSDN通过智能技术生成

1、在Hbuilder X中菜单栏选择*“发行”-“网站（PC）Web或手机H5”*
在这里插入图片描述
2、输入网站标题和网站域名
在这里插入图片描述
3、发行前可先点击“高级”，跳转至manifest.json（也可直接在项目目录中点进去） 选择“h5配置”
在这里插入图片描述
设置运行的基础路径**（注意此处的基础路径之后需要和服务器上的路径一致）**。路由模式我这里选的是hash。
4、以上设置完成后回到之前的发行页面（可能需要重新之前的发行操作，正常顺序应该是先配置好再来发行） 点击发行 等待Hbuilder编译即可
5、编译完成后控制台会显示如下内容
在这里插入图片描述
6、找到该路径下的h5目录 即可看到打包好的代码
在这里插入图片描述

包含一个index.html文件及若干文件夹（主要是static

最低0.47元/天 解锁文章
「已注销」
关注
uniapp开发，打包成H5部署到服务器
weixin_48596030的博客
12-13 3万+
uniapp开发，打包成H5部署到服务器
uni-app项目打包成H5部署到服务器
最新发布
qq_36158551的博客
08-02 3735
前端使用 uniapp开发项目完成后，需要将页面打包，生成H5的静态文件，部署在服务器上。这样通过服务器链接地址，直接可以在手机上点开来访问。将项目打包成H5部署到服务器，然后链接地址使用uni-app或者android的项目的web组件引用，可实现多项目的数据融合。
HBuilder发布H5，nginx部署
夏已微凉、
02-10 6105
一、说明二、步骤1、manifest.json 基础配置2、manifest.json h5配置3、发行4、发行完毕5、nginx.conf 配置 一、说明 此功能需要先登录！DCloud开发者中心，没有账号的话去注册一个。 二、步骤 1、manifest.json 基础配置 uni-app应用标识(AppID)，不存在请点击 重新获取 2、manifest.json h5配置 配置 页面标题，运行的基础路径，端口 等 3、发行 依次选择：发行 -> 网站-PC Web或手机H5(.
【uni-app】Hbuilder打包h5发行到web服务器
AnsonChen的博客
11-26 1万+
开发用于在微信公众号内打开的H5， 引入了微信sdk，调用sdk的api需要将项目打包到服务器通过https才能测试，否则会报url无效 所以需要将项目部署到服务器来测试 发行前的准备工作： 打开menifest.json配置文件>>h5配置 标题可填可不填，不填默认为基础配置里的应用名称 模板路径不填 路由模式建议history 基础路径：默认/h5/，若打包到根目...
HBuilderX打包 H5
Java&Develop的博客
02-15 9656
1.第一步获取appID 2.第二步，更改 地址为线上地址，下图这两个文件里的地址 3.第三步 点击图中圈的，打包
uniapp 打包h5
拿回忆下酒
01-28 1022
uni-app是一个使用Vue.js开发所有前端应用的框架，开发者编写一套代码，可发布到iOS，Android，H5，以及各种小程序（微信/支付宝/百度/头条/ QQ /钉钉）等多个平台。 通过HBuilderX可视化界面 可视化的方式比较简单，HBuilderX内置相关环境，开箱即用，无需配置nodejs。 开始之前，开发者需先下载安装如下工具： HBuilderX：官方IDE下载地址 HBuilderX是通用的前端开发工具，但为uni-app制成特别强化。 打包h5 打包路径 打包后，找到静态文
uni-app开发打包成H5部署到服务器的详细步骤
qq_38937194的博客
06-26 2245
一、点击菜单栏“发行”，点击选择“网站-PC Web或手机H5”， 二、填写网站标题和网站域名/服务器的IP地址，此地址是将项目打包之后存放静态文件的地址 三、点击进入manifest.json的h5配置里，根据自己的情况配置一些信息。一定要注意配置 “运行的基础路径”，如果出现空白页面或者静态文件404的情况，可能是因为这个路径没有配置好。 四、点击发行，控制台会自动编译。出现以下提示，说明编译成功：该地址就是打包后存在资源的位置 五、将已经打包好的静态页面了，直接把
uni-app 打包为 H5 并上传服务器
01-08
本文主要介绍如何将uni-app项目打包为H5版本，并将其部署到Web服务器上。 **配置步骤** 1. **备份代码**：在进行打包操作前，为了防止意外情况导致源代码受损，建议先复制一份项目代码作为备份。 2. **修改...
uniapp打包成H5部署到服务器教程
w_0217的博客
07-26 777
uniapp打包成H5部署到服务器教程 1：点击菜单栏发行，点击选择网站-H5手机版， 2.进入到manifest.json的h5配置里面，根据自己的情况配置一些信息，我这里是默认的，一定要注意配置运行时候的基础路径（下图红色框标记的地方），如果出现空白页面或者静态文件404的情况，可能是因为这个路径没有配置好。 3.在网站域名这一栏填写，网站域名，例如www.xxx.com或者你的服务器的IP地址47.103.XX.XX，（这个地址是你将项目打包之后存放放静态文件的地址） 4：点击发行，控制台会自动
uni-app - 最新实现将 uniapp 项目打包编译为 H5 网站，并上传部署到 web 服务器进行发布预览（从打包到发布完整流程步骤，Hbuilder 编译打包 h5 发行到 web 服务器）
热门推荐
王佳斌
03-06 1万+
uniapp，打包h5，打包编译H5网站，怎么打包h5，uniapp打包成H5部署到服务器教程，uniapp打包H5页面发布到服务器，uniapp开发,打包成H5部署到服务器_uniapp 打包h5，uniapp如何打包h5项目，怎么把项目打包成H5，uniapp如何打包成H5并且放到web端上，打包成h5部署到服务器的步骤，打包发行到h5报错怎么办，如何将uniapp打包的h5网站放到服务器上，编译打包后怎么放到web服务器中，如何将uniapp开发的H5打包并部署到服务器，部署使用uniapp开发的h5
uniapp 支付与打包上传
qq_68086484的博客
12-01 223
let rewardedVideoAd = null //定义。orderInfo: orderInfo, //订单信息。provider:item.id, //提供商。app的版权证明（600-1500）现在只有华为可以个人上传 其他都必须是公司。manifest.json 微信小程序配置。开通广告(视频激励广告最挣钱)本地存储 ||loginMpWeixin。最难：应付国家的隐私条例。小程序右上角上传（先测试，真机测试）04 根据订单信息发起支付。01 用户的点击 发起支付。02 获取openid。
从uniapp使用从开发到打包
weixin_48333948的博客
12-04 714
使用软件 我自己是在HBuilder X中开发 创建uniapp项目 运行uniapp项目 如何打包不同平台的代码 1.需要使用编辑器HBuilder X，和掌握uniapp语法来编写 2.写完以后如何打包上线 先要点击util文件夹下的manifest.json文件完成项目配置 然后点击发行就可以打包成各种类型的版本了 如何打包apk 云打包，如何运行在不同的端 1. uni-app 云打包流程: 发行 -> 原生app云打包 -> 使用DCloud公用证书 -> 输入包
玩转 uniapp 全端开发
不懂先生的博客
08-31 3373
uni-app是一个使用开发所有前端应用的框架，开发者编写一套代码，可发布到iOS、Android、Web（响应式）、以及各种小程序（微信/支付宝/百度/头条/飞书/QQ/快手/钉钉/淘宝）、快应用等多个平台。是目前全端开发框架的佼佼者uviewuni ui使用文档完整示例hbuilderX插件市场uniCloud┌─uniCloud 云空间目录，阿里云为uniCloud-aliyun,腾讯云为uniCloud-tcb│─components 符合vue组件规范的uni-app组件目录。......
app linux服务端,uniapp打包发版到linux服务器步骤----H5端
weixin_30814737的博客
05-09 815
最近在写uni-app项目，项目打包部署到服务器后，搞了好一会一直打开是空白页，原来自己有几个地方疏忽了，现把步骤整理一下：第1步：编辑配置 mainifest.json 文件 tip：运行的基础路径，我的是reads路径，那么服务器上 要新建一个reads文件夹(如下图) 第2步：点击HBuilderX顶部菜单发行，选择网站-h5手机版 第3步：弹出框提示填写 网站标题和网站域名，然后点击发行 ...
uniapp H5 发布流程
qq_45530512的博客
09-22 5272
uniapp 微信公众号 上线流程 此应用 DCloud appid 为 __UNI__150DF60 ，您不是这个应用的项目成员。1、联系这个应用的所有者，请求加入项目成员（https://dev.dcloud.net.cn "成员管理"-"添加项目成员"）；2、重新在manifest.json中生成自己的APPID；3、联系应用所有者将此 DCloud appid 转让给当前账号。
uni-app项目打包成H5部署到服务器(超详细步骤)
qq_36926234的博客
09-14 1万+
1 , HBuilderX打开你的uni-app项目 -- > 点发行 - > 网站 - PC Web或手机H5 2、点完之后会弹出一个框, 填写网站标题和和域名之后点发行 3 , 点完之后控制台会显示正在编译中... , 稍等一会 4、 打包成功 , 生成了unpackage文件夹, 打包好的文件存放在里面 二 , 用一个工具, 把打包好的文件上传到你的服务器 , 我用的是Xftp , 用别的工具也可以,这里推荐一款免费的软件FileZilla,直接在官网下载免费...
uniapp打包h5部署到服务器报net::ERR_CONNECTION_RESET
07-27
这个错误通常是由于服务器重置了连接引起的。有几种可能的原因和解决方法： 1. 服务器配置问题：检查服务器配置是否正确。确保服务器能够正常处理传入的请求，并且没有任何限制或阻止连接的设置。 2. 网络问题：...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值