uni-app 打包成H5之后，发布部署到服务上

最新推荐文章于 2025-04-17 09:49:25 发布
最新推荐文章于 2025-04-17 09:49:25 发布
阅读量1.4w 收藏 13
点赞数
分类专栏： js 与框架类
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.youkuaiyun.com/oXiangZuoZuo12345/article/details/103503297
版权

1. 配置发行后的路径（发行在网站根目录可不配置），比如发行网站路径是www.xxx.com/html5，在manifest.json可视化界面 - H5配置 - 运行的基础路径中设置，也可以在源码视图内编辑h5节点，router下增加base属性为html5。
可视化界面设置：

  1. 点击菜单 发行->H5
  2. 在当下项目下的unpackage/dist/build/h5目录找到出的资源，部署服务器（或者使用本地服务器预览，不要直接在浏览器打开html文件）。
  3. 访问时直接按照服务器路径访问，不需要加index.html
uniapp发布h5
m0_49868348的博客
06-30 4514
第一步. uniapp配置发布文件 第二步. 发行 1.点击发行 2.填入打包信息 直接写www.xxx.com 或者 1x.xxx.xxx就行 3.等待打包成功 可以看到打包成功后的地址如下 第三步. 上传项目到阿里云服务器 1.用xshell连接服务器 2.用xftp连接上传 第四步. nginx配置 在nginx.conf添加如下配置 然后重新载入配置文件 /usr/local/nginx/sbin/nginx -s reload # 重新载入配置文件 /usr/lo
uni - app 打包（H5，小程序，APP）
qq_25906119的博客
02-02 1689
uni-app ，H5端，小程序端，APP端打包
uniapp h5打包运行二级目录
qq_26715417的博客
04-17 4127
项目中需要将H5项目运行在域名下的二级目录。但uniapp 官方不支持二级，默认会运行在根目录 实现方法： 1：manifest.json 中配置 “h5”: { “publicPath”: “./”, } 2；打包生成后手动修改static/ js / index.xxxxx.js 文件 router={mode:“hash”,base:"/"} 改为 router={mo...
uni-app 打包H5 部署到非根目录地址上
Edwin_jade的博客
07-30 528
非根目录部署H5 页面
uniapp H5 扫描二维码解决方案
最新发布
weixin_59685936的博客
04-17 743
uniapp H5 扫描二维码解决方案
uni-APP h5发布
wenxi2367的博客
04-15 189
hbuilder配置 发行 查看
uniapp h5发行
qq_44792224的博客
11-13 2592
前端使用uniapp开发项目完成后，需要将页面打包，生成H5的静态文件，部署在服务器上。这样通过服务器链接地址，直接可以在手机上点开来访问。
uniapp发布H5，使用5+APP打包成网址包
sunluyi的博客
07-21 6587
项目需求： 使用uniapp打包的项目，每次修改代码，都需要重新发布新版本，客户端检测更新，进行APP更新安装操作。 因客户需求，需要在H5更新后，APP代码也自动更新，且不需要重新下载APP。 所以这里使用5+APP 打包成网址包 5+APP弊端 1、无法动态修改状态栏颜色，默认状态栏灰色， 2、uniapp中的一些系统API无法使用。需要自行使用5+ API兼容 1、正常使用uniapp，或者vue开发项目。完成后发布到H5 2、创建5+app项目。把启动页和LOGO图放入项目中，只保留以.
uniapp打包发布h5、APP和微信小程序（自测体验版）
qq_634380940的博客
12-24 3131
uniapp打包发布h5、APP和微信小程序（自测体验版）
uni-app 打包为 H5 并上传服务器
01-08
【uni-app打包为H5并上传服务器】 uni-app是一个跨平台的前端开发框架，它允许开发者使用一套代码来构建iOS、Android、Web等多端应用。本文主要介绍如何将uni-app项目打包为H5版本，并将其部署到Web服务器上。 **...
uni-app项目打包成H5部署到服务器(超详细步骤)
热门推荐
qq_36926234的博客
09-14 1万+
1 , HBuilderX打开你的uni-app项目 -- > 点发行 - > 网站 - PC Web或手机H5 2、点完之后会弹出一个框, 填写网站标题和和域名之后点发行 3 , 点完之后控制台会显示正在编译中... , 稍等一会 4、 打包成功 , 生成了unpackage文件夹, 打包好的文件存放在里面 二 , 用一个工具, 把打包好的文件上传到你的服务器 , 我用的是Xftp , 用别的工具也可以,这里推荐一款免费的软件FileZilla,直接在官网下载免费...
将用uni-app完成的H5项目打包并部署在github服务器上.简单快速(使用HbuilderX编辑器)
QQ的Blog
03-07 1723
将用uni-app完成的H5项目打包并部署在github服务器上.简单快速(使用HbuilderX编辑器)
uniapp项目打包发布H5本地预览
weixin_53339757的博客
01-04 3944
uniapp项目打包H5本地预览
uniapp H5页面打包发布
Gblfy_Blog
01-03 1869
文章目录1. 打开 `HBuilder`2. 打开项目3. 点击发行4. 等待项目编译5. 查看路径6. 安装7. 启动 1. 打开 HBuilder 2. 打开项目 打开当前要打包的项目 3. 点击发行 ，找到【网站 - PC web 或手机 H5 】 确认【网站标题】，无需【网站域名】，直接点击发行即可 4. 等待项目编译 5. 查看路径 编译成功后，项目会被导出到指定路径 找到该路径下的文件，即为【打包后的项目】 彩蛋：本地玩耍技巧 6. 安装 注意： 不可直接打开 index.html
uniapp h5 小程序 打包发布
qq_70250331的博客
08-10 289
h5 小程序：
【uniapp】打包成H5并发布
春天的波菜
10-16 9269
uniapp打包成h5发布。
Uni-App之前端H5发版
陌上人如玉，公子世无双。
10-24 433
.
uniapp环境H5运行及发行(入门必学)
luck332的专栏
08-27 2895
Uni-app是一个使用Vue.js开发所有前端应用的框架，它可以编译到iOS、Android、H5、以及各种小程序等多个平台。uniapp环境H5运行及发行(入门必学)
uniapp H5 发布流程
qq_45530512的博客
09-22 5451
uniapp 微信公众号 上线流程 此应用 DCloud appid 为 __UNI__150DF60 ，您不是这个应用的项目成员。1、联系这个应用的所有者，请求加入项目成员（https://dev.dcloud.net.cn "成员管理"-"添加项目成员"）；2、重新在manifest.json中生成自己的APPID；3、联系应用所有者将此 DCloud appid 转让给当前账号。
uni-app打包H5
01-23
### 使用 Uni-App 进行 H5 打包 #### 准备工作 为了能够顺利地将 Uni-App 项目打包成 H5 并部署至服务器，需先完成一些准备工作。确保本地环境已安装 Node.js 和 npm 或者 yarn 工具，这是运行 Vue CLI 及其插件所必需的基础环境。 #### 修改 `manifest.json` 配置文件 在开始打包之前，建议调整位于根目录下的 `manifest.json` 文件中的配置项来适应目标平台的需求。特别是对于 H5 应用来说，可以在此处设定应用名称、启动页图片以及其他元数据信息[^1]。 ```json { "name": "YourAppName", "description": "A brief description of your app.", ... } ``` #### 安装依赖并构建项目 进入命令行工具，在项目的根目录下执行如下指令以安装所需的全部依赖： ```bash npm install # or yarn install ``` 接着，可以通过下面这条命令来进行针对 H5 的编译操作： ```bash npm run build:h5 # or with Yarn yarn build:h5 ``` 这一步骤会读取源码并将它们转换为适合浏览器解析的形式，最终输出到指定路径下的 dist 文件夹内。 #### 自动化发布流程 (可选) 如果希望简化重复性的手动部署过程，则可以考虑利用 Jenkins CI/CD 流水线配合官方提供的 CLI 命令实现自动化发布的功能。具体做法是在 Jenkins 中创建一个新的 Job，并在其脚本部分加入类似这样的语句: ```bash jenkins-cli.bat publish --platform h5 --project YourProjectName > cli_output.log 2> cli_error.log ``` 上述代码片段展示了如何借助 Jenkins 的远程调用来触发一次完整的 uni-app 构建与上传动作，同时记录日志以便后续排查可能出现的问题[^2]。 #### 实现微信分享功能 (可选) 为了让基于 Uni-App 开发的应用更好地融入社交场景之中，不妨尝试集成来自微信公众平台所提供的 JS SDK 来增强用户体验。比如当用户点击页面上的某个按钮时自动弹出带有预览图标的对话框邀请好友一起参与活动等互动行为都可以通过以下方式轻松达成： ```javascript wx.config({ debug: false, appId: 'your_app_id', timestamp: response.data.timestamp, nonceStr: response.data.nonceStr, signature: response.data.signature, jsApiList: ['updateAppMessageShareData'] }); ``` 这段 JavaScript 代码负责初始化微信内置浏览器内的 API 接口权限校验机制；而真正用于定制分享卡片外观样式的则是另一个名为 `updateAppMessageShareData()` 的函数[^3]。
评论 2
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值