通过hbuilder x 把vue项目打包成apk

最新推荐文章于 2023-12-19 16:43:06 发布
最新推荐文章于 2023-12-19 16:43:06 发布
阅读量338 收藏
点赞数 1
分类专栏： 前端 js 文章标签： 前端 vue
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_44693565/article/details/115751779
版权
前端 同时被 2 个专栏收录
7 篇文章 0 订阅
订阅专栏
js
2 篇文章 0 订阅
订阅专栏

文章目录

通过hbuilderx把vue项目打包成apk

步骤

1.打包vue项目

npm run build

打包完成
在这里插入图片描述
打包生成dist文件
在这里插入图片描述
dist文件内容
在这里插入图片描述

2.通过hbuilder x新建5+App（A）

打开hbuildx 点击文件>新建>项目 弹出新建项目框 —创建项目

在这里插入图片描述
创建 某某 成功
在这里插入图片描述

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

在这里插入图片描述

打开manifest.json 进入基础配置
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述

在这里插入图片描述

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

在这里插入图片描述

在这里插入图片描述
自己下载安装试一下

在这里插入图片描述
此项目打包为横屏APP （5+APP）

若想vue打包横屏成wap2app（把网址打包成APP的壳）
参考：https://blog.csdn.net/qq_42702751/article/details/104015752

小强，逞强的强
关注
  • 1
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
vue项目通过hbuilderx打包为apk
Debug的博客
06-28 497
1.vue项目npm run build 得到dist文件夹 dist文件夹内容示例 新建5+APP项目 空的5+APP项目文件夹情况 将dist文件夹下的内容粘贴（并覆盖）到5+APP下后
Vue 项目利用 HBuilderX 打包 APP 流程
前端知识分享喵
05-12 6644
想要将 Vue 打包成 App，要借助一些插件工具，例如：Electron、Cordova 等，或者直接利用开发工具，例如：Android Studio、HBuilderX 等。本文的目的是带大家通过 HBuilder 开发工具对 Vue 项目进行打包。
HBuilderX 打包 vue 项目生成 apk
GIS（地理信息系统）
07-15 1578
HBuilderX 打包 vue 项目生成 apk
hbuilder 打包 VUE项目为APK
zfitcode的博客
12-18 404
hbuilder 打包 VUE项目为APK 本项目使用 hbuilder 进行打包 已经验证 设置 vue 打包路径 VUE默认的项目根路径会导致打包后白屏。 vue.config.js publicPath: './', 解决手机点击返回按钮退出项目bug /public/index.html 添加代码 <!DOCTYPE html> <html> <head> ... <script> document.a
用HBuilderX把vue项目打包成apk
weixin_50552284的博客
10-04 5959
下载 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）.
使用Hbuilder将vue项目封装为移动端安装包(apk)
wallace_yang的博客
08-19 2045
使用Hbuilder将vue项目封装为移动端安装包apk
使用hbuilderx将vue项目打包成App
啊哈前端的专栏
06-02 6951
一、打包vue web项目 1、修改build的配置 在vue-cli(2.9.x版本)下，修改config目录下index.js里面的build.assetsPublicPath(默认是/，这里在/之前加了个英文状态下的点符号) 2、运行yarn run build（我用的是yarn包管理器，如果是用npm，则运行npm run build） 打包后的静态资源文件之后会用到。 ...
HBuilderX打包H5、vue项目
最新发布
bestyinjun的专栏
12-19 1623
HBuilderX打包H5、vue项目
vue项目打包并使用HBuilder打包生成apk
cnsummerLi
04-06 3738
一.查看vue项目配置 1.配置文件一：build>>utils.js (增加 - publicPath:'../../' ) 原因：这样写是处理打包后找不到静态文件的问题 2.配置文件二：config>>index.js(修改 - assetsPublicPath:'./' ) 原因：修改目的是为了解决js找不到的问题 二 输入打包命令：npm run build 三 打开HBuilder 四：将vue打包的static 和 index.ht...
vue 项目打包成apk（Hbuilder方案）
火星男孩的分享空间
12-14 4321
一：使用webstorm创建vue项目 参考：手把手一步步使用webStrom创建vue项目 二：build项目生成dist文件 执行npm run dev 后打开链接可看到界面说明项目初始化正常， 然后编辑build命令 点击绿色三角形运行执行npm run build，生成dist目录及相关文件： 生成的结构如下： 然后用浏览器打开dist 文件夹中的index.html文件验证buil...
Hbuilder将vue项目打包为app（具体步骤和注意点）
...
10-04 4257
Hbuilder将vue项目打包为app（具体步骤和注意点）
用HbuilderX将vue项目打包成apk
北鼻娃的博客
03-16 420
这边我要记录一个小小的坑，很久之前打包的项目，再次打开后，manifest.json文件不展示视图了，全是代码形式，此时点开 ‘发行-原生App云打包’的选项被禁用，无法操作。解决方案：在项目名称上右键-----重新识别项目类型，关闭manifest.json文件重新打开，点开‘发行’，就可以发行app啦。如标题，用HbuilderX将vue项目打包成apk比较简单，网上都是教程，这里贴一个参考地址，就不多赘述了。
hbuilder打包vue项目生成apk
weixin_30378623的博客
03-30 184
第一步，vue项目开发完成后编译需要更改的配置项： 网上有人说 productionGzip 可以设置为true，但本人测试发现 productionGzip 为true的话会导致最后一步 打包失败； 其实设置为 false的话，通过npm run build 编译出来的js和css文件已经是经过 压缩 和 混淆 了，设置为true估计是进行第二次压缩（生成后缀名为gz的文...
HBuilder 打包
weixin_46243213的博客
10-07 1628
HBuilder 打包
使用HBuilderX打包vue生成安装包apk
youyouyouyou44的博客
03-27 1890
在打包vue程序的过程中，遇到了很多问题： 1、HBuilder模拟器查看的界面空白 刚开始使用的HBuilder打包，结果安装以后无法运行，界面上什么都没有，然后使用HBuilder调试基座查看，还是不能查看，在此之前是可以成功查看的，后来检查了一下主要是我使用了路由Router的问题，不使用路由的时候是可以正常运行查看的，后来查了一下有人说是版本的问题...
vue项目（webpack+mintui），使用hbuilder打包app
weixin_30301183的博客
06-14 472
一、配置config/index.js 本人没有配置index.js文件，就开始进行了打包，结果最终效果是页面空白，解决了空白，接着底部图标（我是用的阿里巴巴图片）资源找不到。所以配置这步比较重要。 （1）页面空白的解决： 打开config/index.js，将build模块的assetsPublicPath值改为’./’ assetsPublicPath: './', ...
vue 项目打包成 apk 安装包详细步骤
热门推荐
sywdebug的博客
10-27 1万+
下面有说明"全屏并非状态栏透明或变色，而是没有状态栏"，就像打王者吃鸡的时候，手机顶部状态栏是不显示的，那就是全屏显示。而下面说的状态栏透明则是沉浸式状态栏，这里面没有配置项，但是可以自己写，如果需要可自行添加。随后点击 manifest.json，会给你调出配置页面，自行配置。打开左边源码视图，找到"plus"，在这个里面加上这串代码即可。在打包队列中，等就完事了，过会控制台会给你弹出下载链接。就是这个玩意，里面的 css、js 等文件复制过去。大概五分钟过后，打包好了，这个链接就是下载地址。
vue 项目通过 HBuilderX 打包成 apk 移动安装包教程
weixin_42948074的博客
01-18 2627
在使用vue写一些移动端（安卓端）网页的时候 总感觉在用户体验方面不太好，原因有几点， 1.首先在用户需要访问的时候必须去输入框填写你URL地址，像一些内部用的系统一般 网站名也不太容易记，而且不想PC端的浏览器 方便输入。 总之就是懒的去输入，程序员的通病嘛 就是能用简单的绝不搞复杂的，那就废话不多说了，现在使用vue 写页面越来越广泛，如果在找工作的时候说自己不会vue,甚至不知道vue ...
HbuilderX将vue项目打包成apk——Android
weixin_52648390的博客
03-05 501
HbuilderX将vue项目打包成apk——Android 使用npm run build命令将vue项目打包 打开HbuilderX新建项目 3. 将新建的项目中manifest.json以外的文件删除，把上面打包的vue项目dist文件内容放进去 4. 配置manifest.json文件 5. 点击导航栏中的发行—>原生-APP云打包 6.选择Android（apk包），使用公共测试证书，点击打包 7.打包成功，控制台显示以下信息 ...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值