HbuilderX 将 vue项目打包成手机APP

最新推荐文章于 2024-11-17 22:56:50 发布
最新推荐文章于 2024-11-17 22:56:50 发布
阅读量215 收藏 2
点赞数 1
分类专栏： vue 文章标签： android ios web app
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/haizhiyunzk/article/details/116984822
版权

HbuilderX 将 vue项目打包成手机APP

1 首先vue项目中打包

先做下面处理，不然会导致app打开后白屏，因为找不到路径
在这里插入图片描述
打包

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

2 HbuildX中

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

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

顾得！
关注
专栏目录
Vue 项目利用 HBuilderX 打包 APP 流程
前端知识分享喵
05-12 6973
想要将 Vue 打包成 App，要借助一些插件工具，例如：Electron、Cordova 等，或者直接利用开发工具，例如：Android Studio、HBuilderX 等。本文的目的是带大家通过 HBuilder 开发工具对 Vue 项目进行打包。
HBuilderX 打包 vue 项目生成 apk
GIS（地理信息系统）
07-15 1628
HBuilderX 打包 vue 项目生成 apk
vue项目如何打包以及如何变成android、ios应用程序
热门推荐
田兴的博客
10-25 1万+
前言 前段时间写过一篇使用Hbuilder打包前端网站为WebApp(Android,ios应用) 收到很多前段小伙伴私信，vue开发的项目如何打包成android、ios应用,那么今天就带大家走一遍vue开发的项目如何打包，然后如何发布成android、ios安装程序。安装在自己的手机上呢？ vue-cli4搭建的项目如何打包 基于vue开发的应用，现在主流的是使用vue/cli的4.x版本搭建的项目，从vue-cli的3.x版本以后，如何修改vue的项目配置呢？ 1. 创建vue.config.j
vue项目打包移动端APP
m0_55546349的博客
05-11 437
打包 在vue.config.js中设置 module.exports={publicPath:"./"} 在router/index.js关闭路由的history模式（默认哈希） npm run build打包 会生成一个dist文件里面包含js,css,img,index.html 在浏览器打开index.html,检查有无错误 打开Hbuilderx (app开发版本)，新建项目 只保留manifest.json文件 将生成的dist文件夹里面的内容复制，放进该文件
【Hbuilder】Hbuilder 插件[App]云打包安装失败--已解决
amoureux555的博客
07-13 2650
插件[App]云打包安装失败!
AndroidStudio打包HBuilderX的H5+项目为安卓App【一次过，无任何异常报错】
冰凌的博客
02-27 3605
（2）本地电脑务必有JDK1.8以上且配备好环境变量【用于生成和查看证书】，有一个容易犯错误的点，就是在DCloud开发者中心生成证书下载到本地使用，那是不行的，我爬了两天这个坑，安装JDK后迎刃而解！要注意的是，你在输入密码的时候光标不会有移动的变化，但是你的在输入状态的，不要管他，输入完毕按下回车，这里我以密码为123456示例。（3）项目中有两个容易混淆的build.gradle文件，要注意我们修改的是sampleDemo文件夹下的那个，值得注意的是，此时我的APP有。复制到步骤4刚清空的文件夹。
HBuilder 制作app 在本地模拟器上正常运行，打包之后js不运行的bug
deuat596247的博客
04-24 1058
问题描述: 这是一个当初我遇到的非常令我头疼的问题，在一次的项目中，我们项目的app在本地的夜神模拟器上和手机上都能进行正常的运行，可是当我打包后安装在手机上的时候 却发现页面js不执行生成乱码，这是什么问题呢？ 排查问题: 1、首先我想到是兼容性，我检查了我写的js代码，不存在任何的兼容性问题 　　2、排除了兼容性问题后，我反复加载这个页面，好像这个页面的js一个...
使用hbuilderx将vue项目打包成App
啊哈前端的专栏
06-02 7031
一、打包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 1790
HBuilderX打包H5、vue项目
使用HBuilderX 打包 vue 项目 为 App 的步骤
ZHIYUANfL的博客
05-31 6583
这里，我的项目是vue-cli构建的工程，h5移动端页面。 由于开发成本并没有用安卓或ios原生语言来开发app，而是选择将现有项目直接打包。 下面我会分享一下HBuilderX 打包 vue 项目 为 App 的步骤。希望对有需求的同学提供帮助。 原vue项目打包dist文件 1、首先以及必须，将config文件夹里的index.js文件中assetsPublicPath由'/'改为 '...
HbuilderX打包vue工程为Android apk和aab文件遇到的坑
qq_44355500的博客
10-22 2022
一、打包apk文件 问题：首页白屏，解决方案：将路由模式从history改成hash模式 const router = new VueRouter({ // mode: 'history', mode：'hash', }); 2.问题：接口请求失效，解决方案：将所有的接口请求加上完整地址，例如利用axios的情况，在request函数的请求参数url中加上baseUrl let baseUrl = 'http://xx.xxxx.com'; export default { login(
Vue项目打包成移动App以及在手机上运行
weixin_44068394的博客
03-16 2797
使用工具HBuilder 或者是HBuilder X 将完成的Vue项目打包 (build)后的dist文件放入编译器,在HBuilder中直接右键选择转换为移动App即可，在HBuilder X中要先新建一个5+App项目 在新建的test项目中，除了App配置文件manifest.json，其他文件可以全都删除掉。然后，将之前打包好的vue项目中的dist文件夹中的所有文件复制到...
Vue项目打包成安卓APP
weixin_42864629的博客
04-03 3658
概述：普通vue项目如何成安卓apk安装包 第一步：项目目录 config文件夹–>index.js里面的两处assetsPublicPath，把 ‘/’ 改为 ‘./’ 第二步：通过npm run build 指令打包vue项目到dist文件夹里面 第三步：通过HBuilderX工具5+App的默认模板项目 第四步：把除了manifest.json以外的所有东西删除 第五步：把vue打...
vue移动端项目怎么生成apk_vue-cli或vue项目利用HBuilder打包成移动端app操作
weixin_39850981的博客
12-21 679
一、测试项目是否可以正确运行 指令:npm run dev1、首先我们先建立一个vue的项目，本人用的是vue-cli随便建立的，然后运行项目二、修改路径 (assetsPublicPath: ‘./')1、 打开我们config中的js文件，修改assetsPublicPath的路径为"./"(下图的右下角位置)2、 检查下assetsRoot: path.resolve(__dirname, ...
如何将vue项目打包为.apk文件
duang_summer的博客
04-27 9911
说明：使用Vue.js开发完毕的app一般不作处理的话，就只能在浏览器上做为Webapp使用。如果需要将它安装到安卓手机上就需要打包为.apk文件了。 具体步骤： 1.在vue项目中找到config/build.js 2.到build属性下的assetsPublicPath属性： 改变 '/', 为'./' （ps：就是加了个点） 3. ...
教你如何3分钟把VUE项目打包成apk，真的只要3分钟
邓占勇的博客
11-03 1万+
前提准备 使用vue-cli3搭建的项目 工具 HBuilder X，他的图标长这个样子，点击下载 做前端的大多数小伙伴们都应该知道，使用起来轻巧、急速，但是他主要是针对于VUE生态打造的，相对于 vscode 缺少了丰富的插件支持以及多语言编译的支持。但是它也有vscode无法满足的功能，比如说今天我们就要用它来把vue项目打包为 apk。 打包步骤 执行 npm run build 打包vue项目 下载并安装HBuilder X 依次点击文件》新建》项目，选择 5+APP(A) 选项，并填写好项目名
24首届数证杯（流量分析部分）
weixin_49064458的博客
11-17 385
2024年首届数证杯全国电子数据取证竞赛，为深入贯彻国家关于强化网络安全和信息化发展的战略方针，提升我国在电子数据取证与分析领域的专业技术水平，推动产业界、学术界和研究机构的深度合作，进一步培养和构建电子数据取证技术的专业人才队伍。
Android okhttp 网络链接各阶段监控
最新发布
子冉冰清的博客
11-17 61
发起 HTTP 请求并使用。
Vue项目用HBuilder打包成Android App：步骤详解及问题解决
首先，对于基于vue-cli 3.x及以后版本的项目，需要在项目根目录下创建一个`vue.config.js`文件，用于配置Webpack，特别是设置打包的公共路径（publicPath），以避免在安卓手机上安装应用时出现白屏问题。 打包过程...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值