HBuilder将vue项目打包成移动端app

最新推荐文章于 2022-03-22 21:38:25 发布
最新推荐文章于 2022-03-22 21:38:25 发布
阅读量756 收藏 9
点赞数 2
分类专栏： vue 文章标签： app vue打包成APP
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_33843076/article/details/103279685
版权

vue项目打包成移动APP

1.首先创建一个vue项目

在这里插入图片描述

2.什么都不要管,直接npm run build 打包，打包后之后会有一个dist文件

在这里插入图片描述

3 使用HBuilder X 新建一个5+APP

在这里插入图片描述

4 除了manifest.json 其他文件全部删除

在这里插入图片描述
在这里插入图片描述

5然后把打包好的dist文件夹下文件复制到test 下

在这里插入图片描述

6 接着修改index.html

这是默认文件

在这里插入图片描述

在引入文件前面加上 ./
修改后的 每一个都要加上
在这里插入图片描述

7.云打包 点击云打包

在这里插入图片描述

使用公用测试正式 广告全部不要勾选 然后点击打包 打包后之后会返回一个下apk链接 复制链接到浏览器下载 下载后 发给自己手机上 安装就可以了

在这里插入图片描述
在这里插入图片描述

下面是效果图（公司的一个项目）
在这里插入图片描述

刚好做到这么个项目，百度找了很多 都不行 然后自己结合百度的整合，终于搞好了

醉清颜
关注
专栏目录
vue项目用HBuilder打包APP.docx
09-09
在本文中，我们将深入探讨如何使用Vue.js项目和HBuilder X进行APP打包，以及如何解决安卓手机上的特定问题，如两次退出的处理。Vue.js是一种流行的前端框架，它提供了丰富的功能和组件，使得构建移动端应用变得简单...
HBuilder 打包
最新发布
weixin_46243213的博客
10-07 1679
HBuilder 打包
hbuildx打包成apk_vue+HBuilder 打包成apk
weixin_39870700的博客
12-24 165
默认配置，直接npm run build将生成后的dist文件夹复制出来放到HBuilder相应目录下，然后HBuild下打开dist目录。强调：用的是HBuilder 不是 HBuildrX,因为我用HBuilderX打包反复闪退，实在搞不定原因啊要么转换为移动app，要么新建一个移动app然后复制manifest.json文件到disk目录。然后右键菜单 发行=》云打包-原生安装包=》接下来直...
vue项目通过Hbuild 打包成apk文件
暮子凡的博客
07-10 411
vue项目通过Hbuild 打包成apk文件 一，修改基本配置 vue.config.js文件，注释代理配置 publicPath 改成 ‘./’ //vue.config.js module.exports = { publicPath: "./", //outputDir: "dist", // 输出文件目录 //assetsDir: "static", // 配置js、css静态资源二级目录的位置 devServer: { open: true, //设置启动项目时默认打
用HBuilderX把vue项目打包成apk
weixin_50552284的博客
10-04 6032
下载 https://www.dcloud.io/hbuilderx.html 官网安装说明 https://hx.dcloud.net.cn/Tutorial/install/windows 3.在vscode中打包vue项目 在打包vue项目之前，修改以下几处： （1）config\index.js 把build下面的assetsPublicPath的值，从’/‘改为’./’： （2）src/router/index.js mode如果是history，注释掉。 根目录直接指向想要的画面。 （3）.
vue项目利用Hbuilder打包成APP流程，以及遇到的坑
wly_er的博客
07-24 4525
目录 1.打包项目 1.1打包的app出现白屏。 1.2点击页面跳转不了，报Loadingchunk2failed. 等错误。 1.3.点手机物理按钮，直接退出程序。 2.Hbuilder发布 2.1创建项目5+App项目 2.2替换文件 2.3利用云打包发布APP 1.打包项目 期间遇到的坑，提前说下，避免重复工作。 1.1打包的app出现白屏。 出现原...
vue项目中使用Hbuilder打包app 设置沉浸式状态栏的方法
12-12
以上所述是小编给大家介绍的vue项目中使用Hbuilder打包app 设置沉浸式状态栏的方法，希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对软件开发网网站的支持！
使用vue开发移动端app 持续更新中
01-20
4. **Vue项目打包成移动端APP**：当你完成了Web App的开发，你可以进一步学习如何将其打包成原生的移动端应用，例如通过HBuilderX的云打包服务。 Vue CLI的中文文档是另一个宝贵的资源，它详细介绍了如何使用这个...
使用HBuilderX打包vue生成安装包apk
youyouyouyou44的博客
03-27 1895
在打包vue程序的过程中，遇到了很多问题： 1、HBuilder模拟器查看的界面空白 刚开始使用的HBuilder打包，结果安装以后无法运行，界面上什么都没有，然后使用HBuilder调试基座查看，还是不能查看，在此之前是可以成功查看的，后来检查了一下主要是我使用了路由Router的问题，不使用路由的时候是可以正常运行查看的，后来查了一下有人说是版本的问题...
vue项目使用hbuildX打包成app
weixin_50382901的博客
03-22 1407
vue项目使用hbuildX打包成app
vue项目 - 利用HBuilderX打包成APP
weixin_55042716的博客
06-15 578
1.使用 HBuilderX 新创建项目 类型点选 为 5+App 2.设置文件 将新创建项目 自动生成的文件删除 仅保留manifest.json 文件。 然后将自己的文件移入 3，设置 manifest.json 文件。 4.点击发行 5.设置 点选安卓或者iOS (ios设置需要证书，这里点选的是安卓) 安卓设置 6.开始进行打包 返回下载地址就代表成功了 点击下载地址发送到手机上即可安装 参考;https://blog.csdn.net/blue_698/article/details/
vue2.0 + webpack+axios+elementUi+vue-router+vuex 搭建后台管理系统环境部署（二）
淡淡的云彩恋歌
08-21 1922
前言 最近公司项目需要做一个小型的填报的录入系统，根据业务的具体分析，采用了基于vue2.0 + webpack+axios+elementUi+vue-router+vuex全家桶的技术栈构建录入系统，同时也作为学习vue全家桶技术栈的一个学习记录。 项目初始化 第一步：安装vue-cli，推荐全局安装，安装过程请耐心等待 npm install -g vue-cli 第二步 初...
用HBuilderX 打包 vue 项目 为 App 的步骤
bear_79的专栏
12-31 1307
首先打包你的vue项目生成dist文件夹，教程请移步https://www.cnblogs.com/taohuaya/p/10256670.html 看完上面的教程，请确保你是将： 项目目录下的config文件夹里的index.js文件中,将build对象下的assetsPublicPath中的“/”，改为“./”后，打包生成的dist文件。 开始使用HBuid...
vue项目打包部署linux_Vue前端项目打包，并部署Vue项目到Linux云服务器上
weixin_40000999的博客
12-20 931
一. vue前端项目打包使用vscode开发项目在config目录下的prod.env.js文件当中配置我们后端服务器的IP地址和端口号，因为这是在实际的部署当中所以必须要在生成环境下进行项目的部署。如图所示：prod.env.js在config目录下的index.js文件当中要改assetsPublicPath: ‘./’ 否则不能正确载入静态文件build: {// Template for ...
HbuilderX打包vue移动端项目自有证书生成
sywdebug的博客
07-23 650
我是 Windows 下使用，下载完成，解压出来将里面的 bin 目录添加到环境变量 path 中。test.keystore 是证书文件名称，可修改为自己想设置的文件名称，也可以指定完整文件路径。36500 是证书的有效期，表示 100 年有效期，单位天，建议时间设置长一点，避免证书过期。使用以下命令生成，生成后证书就在输入命令的目录下，生成前记得 cd 到存放证书的目录。testalias 是证书别名，可修改为自己想设置的字符，建议使用英文字母和数字。下面这条是查看证书信息的命令。
Vue项目打包成移动端APP
热门推荐
追梦&天空的博客
09-25 3万+
Vue项目打包成移动端APP 需要准备的工具：Hbuilder 目录 Vue项目打包成移动端APP 首先打包vue到dist目录 然后再Hbuilder中打开dist目录 然后将dist包含的 web项目 转换为 移动 APP项目 前几步配置完成后，就可以在手机上进行真机调试了 真机测试没有问题，就可以进行下一步---》打包apk了 最后将apk安装包安装到手机上就可以正常使用了...
使用Hbuilderx将vue项目打包成App
weixin_48398799的博客
05-21 371
1.修改vue项目中config目录下得index.js index.js文件里面的build.assetsPublicPath(默认是/，这里在/之前加了个英文状态下的点符号) 2.npm run build 打包Vue项目 3.打开Hbuilderx，新建一个h5+ App项目 4.删除vue-app项目里面的css、img、js文件夹；将vue打包之后的dist里面的文件拷贝进vue-app中直接覆盖 5.配置文件mainfest.json中生成AppID 6.其它配置项可选配，不配置的话就可
用HBuilderX 打包 vue 项目 为 本地App 的全步骤, 亲测有效
qq_41737172的博客
09-10 1614
首先打包你的 vue 项目 生成 dist 文件夹，教程请移步 https://www.cnblogs.com/taohuaya/p/10256670.html 看完上面的教程，请确保 你是 将： 项目目录下的config文件夹里的index.js文件中,将build对象下的assetsPublicPath中的“/”，改为“./”后，打包生成的 dist 文件。 开始使用 HBuiderX 打包。（工具下载地址：http://www.dcloud.io/） 这是我vue 项目打包后的dist 文件。
评论 4
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值