HBuilder发布H5，nginx部署

打包好的代码在文件中打开。

HBulider是一款基于Eclipse的IDE，兼容Eclipse插件，拥有完整的语法提示和代码输入法、代码块等，对于Web应用开发十分方便，同时HBulider内置了HTML5模板和MUI框架，可以十分快捷的创建H5移动应用。 本文使用HBulider创建一个H5移动应用，包含摄像头调用、二维码扫描、文件上传、本地文件系统、本地存储等功能，并在HBulider进行真机调试，最后生成离线资源并使

本文主要记录下 uni-app 使用 HbuilderX 打包并发行 H5 的配置。

开发用于在微信公众号内打开的H5， 引入了微信sdk，调用sdk的api需要将项目打包到服务器通过https才能测试，否则会报url无效 所以需要将项目部署到服务器来测试 发行前的准备工作： 打开menifest.json配置文件>>h5配置 标题可填可不填，不填默认为基础配置里的应用名称 模板路径不填 路由模式建议history 基础路径：默认/h5/，若打包到根目...

我们用的是宝塔直接部署，每次直接把这个文件夹上传到宝塔后，直接替换掉原来的h5文件夹即可。新页面立刻就能通过域名访问到。我这里是把这个文件夹打包了，这样方便上传到服务器，传上去之后再解压即可，然后把名字改成h5就好了。按照打包后的路径，找到打包好的文件夹，把文件夹里的内容，上传到服务器上去部署即可。2、面板里的所有信息都可以不填，也不用勾选==》直接点击【发行】即可。我们需要的就是这个【web】文件夹里的内容。

HBuilderX打包H5端流程，前端打包操作以及后端操作！

在项目中会碰见需要在nginx代理多个项目，如果在加上uniapp开发的H5端的项目，你还要在nginx中区分PC端和手机H5端，这就会让人很头大！注意，index.html前面必须加你的前端包外层的父级文件夹地址（如果你是把前端包进行区分，也就是说pc和h5的前端包你要做区分，你就必须将两个项目(pc和h5)放在不同的文件夹中进行区分）这个名称你可以随意起，这个主要是你的访问域名需要加这个名称来访问你的项目。例如:https:// xxx.xx.cn:3000/h5 这样就可以访问这个h5的项目。

nginx 发布h5项目，刷新页面404，配置nginx

这里的运行的基础路径这里写一个自己的比如/h5/就是在网站的根目录下创建一个/h5目录然后放文件.然后就可以去发行了,但是发行之前这里要记得,找到项目中的mainifest.json文件然后。发行以后,然后会给出一个临时域名可以访问,用这个是不是可以做公众号之类的开发了啊。这里网站标题自己写,这里的域名可以不写,也可以写,如果你有的话,然后点击发行。首先使用hbuider开发完程序,然后,再去,点击发型,然后选择。新建以后然后这里点击新建服务空间,然后再去。点击上传以后然后就可以去发行了,这里。

http://XXXXXXX.com这种情况下就不用去在history下面去填写任何东西，如果后面跟着其他路径的话就需要在。需要注意提前配置manifest.json文件，一般情况下只需要选择history模式就可以了。类似的这种问题，那就是访问的权限没给够，需要在面板或者服务器上进行其他的配置。如果需要特殊配置的话就将其余字符串按照示例给到运行的基础文件就可以了。，其实并不是而是打包的配置上出现了问题，例如线上的端口是。点击完发行之后等待一会就通知你的打包成功的包在哪里了。直接找到这个包去部署就可以了。

参考文献： https://zhuanlan.zhihu.com/p/158100556 https://www.csdn.net/tags/MtTaEgxsNDk5OTAxLWJsb2cO0O0O.html https://www.jb51.net/article/180961.htm 打包步骤 当前端uniapp写的项目开发完成的时候，需要将页面打包出来，生成H5的静态文件，部署在服务器上，通过服务器链接地址，就可以直接在手机上点开访问 了。 在网上看了一圈，好像没有找到十分详细的教程，这里稍微详细的记

3. 如果是发布小程序，需要下载小程序运行工具，下载地址： https://developers.weixin.qq.com/miniprogram/dev/devtools/download.html。注意 HBuilderX 工具版本必须是大于等于 4.24 版本，原因： https://zh.uniapp.dcloud.io/api/location/location.html。申请地图 key，以腾讯地图为例，申请地址： https://lbs.qq.com。三、配置地图 key。

一、找到manifest.json配置Web配置。打包成功，点击地址获取文件。

注意:打包成的app可能会出现手机点击返回键直接退出应用，可以加入下面的js代码。1、点击manifest.json，基础配置，APP名字，是否全面屏。双击manifest.json文件进行app的相关配置。2、然后点击图标配置，选好后点自动生成所有图标并替换。配置完成后在index.html中加入跳转js代码。点击模块配置，选VideoPlayer和X5内核。选公测证书然后点打包，（自己有证书就用自己的）然后顶部菜单选发行，选择原生App-云打包。关于启动图，只能使用png格式的。