uniapp开发，打包成H5部署到服务器

已于 2024-05-09 12:00:50 修改
阅读量1.4w 收藏 41
点赞数 8
文章标签： 服务器 uni-app 前端 html5
于 2023-04-14 14:27:43 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.youkuaiyun.com/maoge_666/article/details/130152140
版权
本文详细介绍了使用uniapp完成前端项目开发后，如何打包生成H5静态文件，并进行服务器部署。关键步骤包括修改config.js中的请求地址，配置manifest.json，发行编译，使用SecureCRT连接服务器，解压h5.tar文件，最后通过服务器地址访问已部署的页面。

摘要生成于 C知道 ，由 DeepSeek-R1 满血版支持， 前往体验 >

前端使用uniapp开发项目完成后，需要将页面打包，生成H5的静态文件，部署在服务器上。
这样通过服务器链接地址，直接可以在手机上点开来访问。

打包全步骤如下：
1、修改config.js内的请求地址
需要后台部署到测试服务器上，给到前端一个访问地址
在这里插入图片描述
2、打开mainfest.json ,如果用到地图，需配置地图的key
在这里插入图片描述
3、选择项目–发行–PC/web/h5
在这里插入图片描述
填入网站标题–点击发行
在这里插入图片描述
编译成功后，会出现对应的文件路径，如图所示，点击打开，
在这里插入图片描述
点开后，会看到已经编译好的静态文件，全选–添加到压缩包–压缩格式选择.tar

最低0.47元/天 解锁文章
maoge_666
关注
uniapp项目打包与部署云服务器
Proces的博客
12-02 4203
uniapp项目打包，到部署服务器
uniapp打包成H5部署到服务器教程
w_0217的博客
07-26 859
uniapp打包成H5部署到服务器教程 1：点击菜单栏发行，点击选择网站-H5手机版， 2.进入到manifest.json的h5配置里面，根据自己的情况配置一些信息，我这里是默认的，一定要注意配置运行时候的基础路径（下图红色框标记的地方），如果出现空白页面或者静态文件404的情况，可能是因为这个路径没有配置好。 3.在网站域名这一栏填写，网站域名，例如www.xxx.com或者你的服务器的IP地址47.103.XX.XX，（这个地址是你将项目打包之后存放放静态文件的地址） 4：点击发行，控制台会自动
uni-app 打包为 H5 并上传服务器
01-08
前言 我主要是用 uni-app 来写安卓端，近日需要将程序打包为 H5 放到 web服务器 上，经过一番折腾。 配置 在开始之前，推荐你先【拷贝】一份代码，防止打包出现问题导致代码受损。 在你的项目文件中找到 manifest.json ，打开并作如图配置： 运行的基础路径 如果你写的是 “ /H5/ “ ，那么你的服务器中要建立一个 H5 文件夹。 发行时启动摇树优化 功能是去掉无用代码与僵尸代码，但勾选时要慎重。 发行(打包) 依次点击菜单 → 发行 → 网站-h5手机版，然后弹出对话框，请做如下配置： 最后点击 发行 ，控制台会显示打包日志。 查看包 打包成功后，控制台会给出如下类
uniapp打包h5
最新发布
zyk1036的博客
04-10 181
部署好之后地址为http://ip:端口号/h5/打包好的文件放在后端配置的服务器根目录下。如root D:/ddsoft/web;放在D:/ddsoft/web/h5;
uni-app项目打包成H5部署到服务器
qq_36158551的博客
08-02 1万+
前端使用 uniapp开发项目完成后，需要将页面打包，生成H5的静态文件，部署在服务器上。这样通过服务器链接地址，直接可以在手机上点开来访问。将项目打包成H5部署到服务器，然后链接地址使用uni-app或者android的项目的web组件引用，可实现多项目的数据融合。
【uniapp】打包成H5并发布
春天的波菜
10-16 9155
uniapp打包成h5发布。
uniapp打包成H5
niuniu2878499107的博客
06-13 1561
uniapp打包成H5页面
uni-app开发打包成H5部署到服务器
m0_61368323的博客
08-04 881
1. 点击发行 2.点击进入manifest.json的h5配置里，根据自己的情况配置一些信息。一定要注意配置 “运行的基础路径”，如果出现空白页面或者静态文件404的情况，可能是因为这个路径没有配置好。 3. 填写域名 4. 点击发行后，控制台后显示打包后在哪里 5. 找到打包好后的web里面的static和index.html，把这两个放进服务器里就可以了。
【uniapp】uniapp打包H5（网页端）：
SunPeng的博客
08-10 6156
【uniapp】uniapp打包H5（网页端）：
uni-app开发打包成H5部署到服务器的详细步骤
qq_38937194的博客
06-26 5667
一、点击菜单栏“发行”，点击选择“网站-PC Web或手机H5”， 二、填写网站标题和网站域名/服务器的IP地址，此地址是将项目打包之后存放静态文件的地址 三、点击进入manifest.json的h5配置里，根据自己的情况配置一些信息。一定要注意配置 “运行的基础路径”，如果出现空白页面或者静态文件404的情况，可能是因为这个路径没有配置好。 四、点击发行，控制台会自动编译。出现以下提示，说明编译成功：该地址就是打包后存在资源的位置 五、将已经打包好的静态页面了，直接把
uniapp打包H5
H524268015wsw的博客
03-18 733
uniapp hbuilderX打包H5，部署到某个域名下的目录下
uniapp开发微信小程序打包成h5部署
Liw_J的博客
03-21 3379
需要打包成功之后，会在unpackage页面生成的dist文件夹中多一个Build文件，里面包含h5页面。需要部署的话就把h5页面打包部署即可。需要自己uniapp的appId。此appid是uniapp的appid，非微信小程序给的appid。默认生成的打包链接，静态资源访问的路径是“/static/css”，项目要求前缀添加/mnapp。项目使用uniapp以vue2开发小程序，开发完成之后打包h5部署，包含修改静态资源路径。：打包方式(点击发行 -> 点击网站-PC)
uniapp打包h5部署到服务器
Khan的博客
01-11 2165
uniapp打包h5，部署到服务器
uniapp 打包 H5 实现在 uniapp 打包 APP 的 webview 通信
Brod-Roy的博客
06-21 3247
本文解决 uniapp 打包的 APP 在 webview 内嵌入 uniapp 打包的 H5 页面的需求，并实现通信。
uniApp 打包H5工程 超详细（打包-实现跨域-nignx配置）
qq_20236937的博客
04-18 2万+
参考文献： https://zhuanlan.zhihu.com/p/158100556 https://www.youkuaiyun.com/tags/MtTaEgxsNDk5OTAxLWJsb2cO0O0O.html https://www.jb51.net/article/180961.htm 打包步骤 当前端uniapp写的项目开发完成的时候，需要将页面打包出来，生成H5的静态文件，部署在服务器上，通过服务器链接地址，就可以直接在手机上点开访问 了。 在网上看了一圈，好像没有找到十分详细的教程，这里稍微详细的记
uni-app项目打包成H5部署到服务器(超详细步骤)
热门推荐
weixin_49577940的博客
06-19 3万+
咳咳, 第一次写博客, 有点激动, 因为昨天学了个新技术, 也一直是我之前最不懂的一块, 就是项目做完后如何部署到服务器,昨天尝试了部署uni-app项目, 成功之后很开心, 后面又自己shangw
目打包成H5部署到服务器
03-22
### 如何将UniApp项目打包为H5文件并通过Web服务器进行部署 #### 1. 配置环境 在开始之前，确保已经安装了必要的工具和软件。例如，使用官方推荐的IDE——HBuilderX来完成整个过程[^1]。 #### 2. 打包设置 打开...
评论 3
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值