vue+webpack用hbuilderx快速打包

最新推荐文章于 2025-05-23 09:34:25 发布
原创 最新推荐文章于 2025-05-23 09:34:25 发布 · 973 阅读 · 0 ·
CC 4.0 BY-SA版权
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
文章标签：

#webpack #vue.js #前端 #web app

文章详细介绍了如何将Vue项目打包成5+App的过程，包括在config/index.js中设置assetsPublicPath，解决npmrunbuild时可能出现的问题，将生成的dist文件导入HBuilderX的5+app项目模板，配置manifest.json中的appID，以及处理云打包时的通讯录权限问题，最终生成apk应用文件。

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

文件目录结构
在这里插入图片描述

首先在config/index.js中设置build中

assetsPublicPath: './',

在命令行运行npm run build 可能会出现上一篇文章中的报错，按照修改即可
打包完成后生成dist文件，目录如下
在这里插入图片描述
打开hbuilderx，新建5+app项目
默认模板即可
将其中的文件替换为dist中的文件
在这里插入图片描述
其中manifest.json是配置文件，其中应用标识appID如果没有自动生成就去官网新建个5+app的项目，打开源码视图直接复制appID
其它按需修改，直接默认也可
点击发行——原生APP-云打包
在这里插入图片描述
点击打包之后可能会有通讯录权限问题，回到manifest页面在模块配置中取消即可
等待，生成apk文件

在这里插入图片描述

我要puppy
关注
前端HBuilderX HTML5模版,打包成dist 部署
Rui_bbm的博客
08-07 978
首先需要修改utils中appConfig.js的ip+路径+域名,使用服务器部署，那么就用服务器的ip，prod-api可以自定义，根据自己的需求起别名。发行点击一次即可，无需多次点击，可能会有延迟，等待一会即可，然后在控制台可以看见。找到manifest.json，如果没有域名，点击重新获取即可。出现这些文件就已经完成dist打包全部过程，根据需求使用即可！找到自己需要的发版，我使用的是网站-PC 手机H5。将获取到的域名，复制到网站域名中，然后点击发行。打包完成后会出现路径，然后点击路径。
使用HBuilder打包web项目
qq1158533498的博客
07-27 8935
百度没找到一篇成功的打包流程 弄了两天 走了不少弯路 主要是没搞过安卓 多亏一个安卓开发的朋友帮忙才搞定 好多人都骂HBuilder文档不好 其实他也很冤 应该怪安卓配置太复杂 1.下载软件 即: 从HBuilder官网下的SDK; as; HBuilder; Android SDK; jdk 其中第一个和第三个最好和我下的一样 否则不能保证成功 2.安装 jdk -> Andr...
vue项目（webpack+mintui），使用hbuilder打包app
weixin_30301183的博客
06-14 510
一、配置config/index.js 本人没有配置index.js文件，就开始进行了打包，结果最终效果是页面空白，解决了空白，接着底部图标（我是用的阿里巴巴图片）资源找不到。所以配置这步比较重要。 （1）页面空白的解决： 打开config/index.js，将build模块的assetsPublicPath值改为’./’ assetsPublicPath: './', ...
保姆级教程：Hbuilder 实现 App 打包全流程揭秘
最新发布
开源世界
05-23 1305
本文详细介绍了如何从下载程序文件包到最终打包并上线APP的完整流程。首先，下载并解压开源版或标准版项目文件代码包，然后将模板文件导入Hbuilder工具。接着，修改接口地址和配置参数，包括应用标识、图标、模块配置等。随后，进行APP的云打包，选择Android和iOS平台，填写相关信息并完成打包。最后，分别介绍了安卓端和苹果端的上线步骤，包括生成证书、上传测试版本、审核及上架Appstore等。整个过程涵盖了从开发到上线的各个环节，为开发者提供了全面的指导。
使用Hbuilder打包前端网站为WebApp(Android,ios应用)
田兴的博客
10-08 4777
准备工作： 你要打包的移动端网站地址，如：http://www.tianguixing.com/dist2/#/ 安装 HbuilderX 工具： 官网：http://www.dcloud.io/ 根据你的电脑系统选择下载开发版 安装成功后，回到Hbuilder官网，注册一个账号，然后到软件里点击左下角头像进行登陆 打开开发者工具软件，点击 文件 -> 新建 -> 项目 选择 Wap2App，填写项目名称并将刚刚复制的网址粘贴进去，模板选择默认模板，然后点击创建 右下角会提示项目创建
使用HbuilderX将web项目打包成安卓安装包
dhp1994的博客
10-31 2591
创建app项目 在 HbuilderX 依次选择：文件 》新建 》 项目，类型选择 5+APP；模板选择 默认模板；填写项目名称和项目路径，项目名称最好写英文，项目路径最好不要有中文，点击 创建。找到 发行 》原生 》App-云打包，打开打包窗口，按图示配置，点击 打包，等待几分钟（此处可能会提示要下载APP在线运行插件，等待下载完成就行）即可打包完成。图标配置：上传正方形的.png图片作为app的图标，注意格式必须是.png。按照控制台打印的路径，找到对应的.apk安装包，传输到手机上即可安装使用。
Vue+WebPack+HBuilder 项目记录
热门推荐
点点悠悠的点点滴滴
04-12 2万+
公司项目APP 下载减压可查看源代码，需要测试账号请留言。 Vue+WebPack+HBuilder 项目记录 以前使用过vue+gulp+hbuilder做过app，vue是直接使用script标签引入的。 此次有新项目使用想要手机版与APP一套完成，所以选择使用vue做单页应用，然后使用hbuilder打包但是放入APP的不止是网址，还是将资源打包进去。 开始记录 一为操作步...
mui-vue2：mui + mint + vue2.x + vue-router + vuex + webpack最终打包成原生apk的应用项目，样式使用vue移动端mint ui框架，原生手机能力偏重于mui框架，欢迎星级！
02-20
app打包技术是用工具一键打包成APP，也可以通过eclipse本地打包（本地打包是有添加Android sdk包的需求，这里没有介绍，只是简单构建使用，本地打包工程文件如需可以索取） 。这些都是提供一整套技术解决方案。 说明...
vue2.x +webpack4.x+Hbuilder单页面打包成apk
陌上花开
01-21 1210
vue2.x + webpack4.x 写的项目，现在用hbuilder打包成apk，主要有几点注意的： cnmp run build 的时候，更改一下config下的index.js 中 assetsPublicPath: ‘/‘为’./’: 更改router中的 mode为hash模式，或者注释掉history： 把vue项目打包：cnmp run build，得到dist...
使用HBuilderX 打包 vue 项目 为 App 的步骤
ZHIYUANfL的博客
05-31 6789
这里，我的项目是vue-cli构建的工程，h5移动端页面。 由于开发成本并没有用安卓或ios原生语言来开发app，而是选择将现有项目直接打包。 下面我会分享一下HBuilderX 打包 vue 项目 为 App 的步骤。希望对有需求的同学提供帮助。 原vue项目打包dist文件 1、首先以及必须，将config文件夹里的index.js文件中assetsPublicPath由'/'改为 '...
vue项目用HBuilder打包APP.docx
09-09
通过以上步骤，你不仅学会了如何使用Vue和HBuilder X打包APP，还了解了如何处理安卓设备上的特定问题，如两次滑动退出和刘海屏适配。现在，你可以按照这些步骤，将你的Vue项目转化为可在手机上运行的APP，并享受...
初试vue-cli使用HBuilderx打包app的坑
01-19
微信授权登录提示code-2 appid和appsecret应该是移动应用，而非网页应用 微信授权登录提示code:-100/自定义基座无法微信登录和分享 开发者账号配置的应用签名应该是md5加密后的值，而不是原字符串 生产环境proxyTable不生效，导致接口500 两种解决办法： ①入口文件使用网络地址，且和接口在同一域名下 ②（推荐） 入口文件依旧是index.html 在config/prod.env和config/dev.env下添加API_ROOT 'use strict' module.exports = { NODE_ENV: 'production',
HBuilder打包Web网址
05-25
HBuilder打包Web网址
vue项目（webpack+mintui），使用hbuilder打包app - 小小人儿大大梦想 - 博客园
没做过产品的后端不是个好前端
11-11 427
一、配置config/index.js 本人没有配置index.js文件，就开始进行了打包，结果最终效果是页面空白，解决了空白，接着底部图标（我是用的阿里巴巴图片）资源找不到。所以配置这步比较重要。 （1）页面空白的解决： 打开config/index.js，将build模块的assetsPublicPath值改为’./’ 1 assetsPublicPath:'./', 发布路径 （2）css引用图片资源找不到问题： 因为打包后路径发生变化，导致..
使用HBuilder将web项目打包成app
huaweichenai的博客
01-06 3060
一：下载HBuilder 访问HBuilder官网下载HBuilder：https://www.dcloud.io/ 这里我下载的是windows版的app开发版 将HBuilder下载下来后直接解压即可，他是一个免安装软件 二：使用HBuilder打包web项目 1：打开HBuilder编辑器并进行注册登录 2：创建项目，点击左上角文件-》新建-》项目 3：这里我是已经有一个现成的项目，你们可以更加自己的实际情况选择对应的项目类型，这里我选择的是Wap2App，然后填写一些相关信
HBuilderX打包流程(H5)
为千万同胞少走弯路而写文！！！
12-05 1万+
HBuilderX打包H5端流程，前端打包操作以及后端操作！
关于用hbuilder将web项目打包成app
u011200562的博客
06-18 736
我的项目是vue+vant-ui 1.vue打包前，需要做个处理：找到vue项目下config文件中的index.js，将assetsPublicPath修改成'./'
用HBuilderX打包webapp（套壳h5）
maohangfei.cn
03-10 1181
用HBuilderX打包webapp,把网址打包到app里面
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值