HBuilderX打包H5、vue项目

原创 已于 2023-12-19 16:55:20 修改 · 2.3k 阅读 · 9 ·
CC 4.0 BY-SA版权
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
文章标签：

#vue.js #前端 #javascript #android

于 2023-12-19 16:43:06 首次发布
本文介绍了如何使用HBuilderX将H5和Vue项目转换为5+App项目，并详细阐述了H5项目的路径改造、文件拷贝、模拟器运行检查以及打包APK的过程。对于Vue项目，主要涉及index.js和utils.js的修改。通过这些步骤，开发者可以将Web项目转化为原生APP。

前言：H5和vue项目进行简单改造都可以通过HBuilderX打包成app

一、新建5+App项目

1. 文件-->新建-->项目

2. 选择5+App-->默认模板

3. 只保留manifest.json,其余文件全部删掉

二、H5项目改造并打包

1.将所有绝对路径改为相对路径

例如：

改成

备注：/ 表示根目录、./表示当前目录、../表示当前目录的上一级目录

 所有都要改，包括图片、js引用、css引用等，打包出现空白就是路径原因导致的。

2. 打包后将打包

最低0.47元/天 解锁文章
Vue 项目利用 HBuilderX 打包 APP 流程
前端知识分享喵
05-12 8265
想要将 Vue 打包成 App，要借助一些插件工具，例如：Electron、Cordova 等，或者直接利用开发工具，例如：Android Studio、HBuilderX 等。本文的目的是带大家通过 HBuilder 开发工具对 Vue 项目进行打包。
使用HBuilderX 打包 vue 项目 为 App 的步骤
ZHIYUANfL的博客
05-31 6857
这里，我的项目是vue-cli构建的工程，h5移动端页面。 由于开发成本并没有用安卓或ios原生语言来开发app，而是选择将现有项目直接打包。 下面我会分享一下HBuilderX 打包 vue 项目 为 App 的步骤。希望对有需求的同学提供帮助。 原vue项目打包dist文件 1、首先以及必须，将config文件夹里的index.js文件中assetsPublicPath由'/'改为 '...
hubuild 打包ios_【已解决】HBuilder的iOS端更新后打包发布但出现新的重复的APP
weixin_31708613的博客
12-30 969
某人在折腾hbuilder开发APP，打包成了IPA文件，放到了苹果商店，然后第一个版本正常，昨晚更新了新包，去商城更新，出现了两个版本号不一样的同个app在这里没有更换开发者账号，APP id也没有更换最下面多出一个同名的APP：维港小宇宙HBuilder 打包 更新 多余appHBuilder 打包 更新 新的app参考：中间提到的：manifest.json中的基本信息的：appid经过询问...
HBuilderX 打包 vue 项目生成 apk
GIS（地理信息系统）
07-15 1811
HBuilderX 打包 vue 项目生成 apk
使用 HBuilderX 将网页打包为安卓 APP详细步骤
最新发布
好好学电脑
09-30 1695
本文介绍了使用HBuilderX将网页打包为安卓APP的详细步骤。首先需安装HBuilderX并导入网页项目，然后重点配置manifest.json文件，包括基础信息、图标、权限和页面入口等核心内容。接着通过云打包功能，选择测试版或正式版证书完成打包。最后测试APK功能并发布到应用商店。文章还提供了常见问题的解决方案，强调正确配置manifest.json是关键。整个过程无需本地安卓开发环境，操作简便。
浅谈vue项目利用Hbuilder打包成APP流程,以及遇到的坑
10-14
主要介绍了浅谈vue项目利用Hbuilder打包成APP流程,以及遇到的坑，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
HBuilderX H5 app打包以及加入个推
11-05 7599
推荐：采用H5 + Springboot + netty开发的java聊天程序（https://blog.csdn.net/zwx19921215/article/details/102893689） 首先来说下app加入个推（www.getui.com）。 个推即消息推送，将消息推送至客户端app，要加入个推首先要在个推开发者中心注册账号，进入应用管理创建一个应用。 创建应用的步骤如下： ...
HBuilderX打包流程(H5)
为千万同胞少走弯路而写文！！！
12-05 1万+
HBuilderX打包H5端流程，前端打包操作以及后端操作！
HBuilderX打包 H5
Java&Develop的博客
02-15 9988
1.第一步获取appID 2.第二步，更改 地址为线上地址，下图这两个文件里的地址 3.第三步 点击图中圈的，打包
将vue-cli3项目使用HBuilder X打包移动端app
Wangyhl的博客
03-11 1168
将vue-cli3项目使用HBuilder打包移动端app 1.在根目录vue.config.js文件里面加publicPath: ‘./’, module.exports={ publicPath: './', } 2.路由方式换成hash模式 const router = new VueRouter({ mode: "hash", base: process.env.BAS...
HbuilderX 打包网站教程.docx
07-23
HbuilderX是一款强大的集成开发环境，专为HTML5、Vue.js等前端技术设计，同时也支持将网页快速转化为原生APP。下面将详细解释如何使用HbuilderX来打包你的网站。 首先，你需要【下载和安装HbuilderX】。你可以从...
HbuilderX打包app，Hbuilder怎么打包app，H5打包成app，H5怎么打包成app
热门推荐
LIUAWEIO的博客
03-21 3万+
1.下载HbuilderX之后新建项目 2.在这里选则你需要新建的项目类型，本人打包的是h5app，选的5+app 3.选择好项目本地存放的地址，编写项目名，之后点击创建 4.打开刚刚创建的那个项目，点击打开manifest.json，就是下图这样子 5.填写你的h5项目地址 6.基本配置（看图），太简单太多自己研究 7.SDK配置里可以配置你的项目的appid、key其他配置，比如你的项目...
HBuilderX打包流程(H5)？HBuilder如何发布前端H5应用？前端开发怎样打包发布uniapp项目为h5？
南北极之间
07-17 9351
我们用的是宝塔直接部署，每次直接把这个文件夹上传到宝塔后，直接替换掉原来的h5文件夹即可。新页面立刻就能通过域名访问到。我这里是把这个文件夹打包了，这样方便上传到服务器，传上去之后再解压即可，然后把名字改成h5就好了。按照打包后的路径，找到打包好的文件夹，把文件夹里的内容，上传到服务器上去部署即可。2、面板里的所有信息都可以不填，也不用勾选==》直接点击【发行】即可。我们需要的就是这个【web】文件夹里的内容。
使用HBuilderX将vue或H5项目打包app
鹏仔工作室的秘密基地
08-23 5543
好久没有搞过将vue项目打包成app了，这两天刚好项目需要将vue开发的H5项目打包成APP，那就简单记录一次呗（之前也写过一篇打包app，是将项目使用hbuilder打开，转为webapp什么的，就可以直接打包了，现在不一样了，现在使用HBuilderX还是有些区别）。第二步：我们下载HBuilderX，可前往官网下载 https://www.dcloud.io/hbuilderx.html 下载好以后，打开并新建项目，选择 5+App 默认模板，如下图所示。第三步，我们打开新建项目的文件，如下图所示。
Hbuilder打包html5 app页面
qq_37291064的博客
03-18 3378
1、新建移动App，选择Hello H5+实例模板。 2、新建后，在manifest.json(这里下方有多个tab项设置，此处为应用信息)里面修改需要生成的h5页面路径，可以使用本地文件，也可以使用上线的链接。 3、图标设置、启动图设置等。 4、在目录右键---->发行---->发行为原生安装包。 5、在弹出的窗体里，可以选择IOS打包，也可以选择Android打包。首先，看IOS是...
Hbuilder打包安卓H5-APP，APP与程序分离，更新无需重新打包
一切如你的博客
10-24 4508
Hbuilder打包安卓H5-APP，将自己的APP与程序分离，在服务器上更新APP的代码，apk无需重新打包
用HBuilderX打包webapp（套壳h5）
maohangfei.cn
03-10 1254
用HBuilderX打包webapp,把网址打包到app里面
使用Hbuilder打包vue项目app
Leisure_Time的博客
01-10 685
vue项目， HBuilder / HBuilderX有的情况下 第一步， 使用HBuilder创建一个app项目， 我使用的是HBuilderX， 步骤如下： 选择左上角， 文件， -> 新建 -> 项目 会出先这样的画面： 那么我们选择 5+App那个选项， 这样我们就有一个基本的app模板了 然后我们在打包我们的vue项目， 使用npm run builder...
前端vue--用HbuilderX将小程序打包为h5项目
博客之家
04-13 5971
1. 找到项目中的manifest.json文件->h5配置，更改路由模式为hash模式，基础路径项改为相对路径./ 2. 发行->网站-H5手机版，如下图 3. 网站标题：不用管 网站域名：一般也不用管，但是这里为了出现不必要的问题，域名我填的是前端服务器的域名。 然后发行 4. 打包完成，点击路径拿到编译包 ...
hbuilderx打包vue项目为app
05-09
<think>好的，用户想了解如何使用HBuilderX将Vue项目打包成APP。首先，我需要回顾之前的引用内容，确保信息准确。根据引用[1]、[2]、[3]，HBuilderX打包Vue项目有几个关键步骤：准备Vue项目、配置vue.config.js、打包成H5、导入HBuilderX、配置manifest.json、最后打包生成APP。 用户可能已经知道基本的Vue开发，但可能不熟悉如何调整配置以适应HBuilderX的要求。需要详细说明每个步骤，特别是修改publicPath为相对路径，这是为了避免静态资源路径错误。另外，manifest.json的配置涉及应用名称、图标等，用户可能需要指导如何正确设置这些参数。同时，提到沉浸式状态栏的配置，引用[3]中有相关链接，可能需要简要解释或提供关键点，方便用户操作。 用户可能遇到的问题包括：打包后的资源路径不正确、图标不显示、原生功能集成等。因此，在步骤中需要强调检查路径和真机调试的重要性。此外，生成的相关问题需要考虑用户可能的后续疑问，比如性能优化、原生功能扩展和上架流程，这些都需要提前准备解答。 需要确保语言简洁，步骤清晰，避免使用专业术语过多，让新手也能跟随操作。同时，引用标记要正确对应，比如vue.config.js的修改引用[1]，整体流程引用[2]，沉浸式状态栏引用[3]。最后，相关问题要覆盖用户可能想深入的方向，帮助他们进一步探索。</think>### HBuilderX 打包 Vue 项目为 APP 完整教程 #### 一、前期准备 1. **Vue 项目要求** - 确保项目使用 Vue CLI 构建（推荐 Vue CLI 4.1.2+） - 安装依赖并完成本地调试，保证功能正常 2. **工具安装** - 下载 [HBuilderX](https://www.dcloud.io/hbuilderx.html)（选择标准版或 App 开发版） - 安装 Android/iOS 模拟器或准备真机调试环境 --- #### 二、Vue 项目打包为 H5 1. **配置静态资源路径** 在项目根目录新建 `vue.config.js`，添加以下内容（关键配置）： ```javascript module.exports = { publicPath: './', // 必须设置为相对路径[^1] outputDir: 'dist', // 打包输出目录 assetsDir: 'static' // 静态资源目录 } ``` 2. **执行打包命令** ```bash npm run build ``` 生成 `dist` 文件夹，包含 `index.html` 和静态资源文件 --- #### 三、HBuilderX 操作流程 1. **创建移动应用项目** - 新建「5+ App」项目 - 删除默认 `index.html`，将 `dist` 文件夹内容复制到项目根目录 2. **配置 manifest.json** - **基础设置**：应用名称、版本号、应用标识（如：com.example.app） - **图标配置**：准备 192x192 PNG 图标，替换默认图标 - **模块配置**：按需勾选「Geolocation」「Push」等原生模块[^2] - **沉浸式状态栏**：在「源码视图」中添加： ```json "plus": { "statusbar": { "immersed": true } } ```[^3] --- #### 四、生成 APP 安装包 1. **真机调试** 通过 USB 连接手机，选择「运行」->「运行到手机或模拟器」，验证功能 2. **正式打包** - 选择「发行」->「原生 App-云打包」 - 选择 Android/iOS 平台，勾选「使用 DCloud 老版证书」快速测试 - 等待云端生成安装包（约 3-5 分钟） --- #### 五、注意事项 1. **路径问题**：若页面空白，检查所有资源路径是否使用相对路径 2. **原生功能**：需通过 `plus` 对象调用设备 API，例如： ```javascript document.addEventListener('plusready', function() { var webview = plus.webview.currentWebview(); }); ``` 3. **性能优化**：建议启用「V8 引擎优化」和「资源压缩」
评论
成就一亿技术人!
拼手气红包6.0元
还能输入1000个字符
 
红包 添加红包
表情包 插入表情
表情包 代码片
 条评论被折叠 查看
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值