vue-cli或vue项目利用HBuilder打包成移动端app操作


Posted in Javascript onJuly 29, 2020

一、测试项目是否可以正确运行 指令:npm run dev

1、首先我们先建立一个vue的项目,本人用的是vue-cli随便建立的,然后运行项目

二、修改路径 (assetsPublicPath: ‘./')

1、 打开我们config中的js文件,修改assetsPublicPath的路径为"./"(下图的右下角位置)

2、 检查下assetsRoot: path.resolve(__dirname, ‘…/dist'),

assetsSubDirectory: ‘static',

assetsPublicPath: ‘./', (一般情况下是这样的)

三、打包文件 指令:npm run build

1、打包后会生成dist文件

四、创建新目录(MyApp)

1、 在HBuilder中点击文件,打开目录,找到我们项目中的打包好的文件下找到dist文件,再命名,然后确 定。然后我们会看到这样的带着 W 的文件

五、转换APP

1、点击该项目右键属性,点击转换成App(T)

六、关于manifest.json配置

1、应用信息

vue-cli或vue项目利用HBuilder打包成移动端app操作

2、manifest.json里面配置APP名字及APP图标

app图标:现在下面点击图标配置,然后选择图片放上去(图片只能为PNG格式,通过手动改后缀是不可以的)

3、启动图片(splash)配置,sdk配置等有需要就配置没有就默认

七、调试和打包生成apk

1、先安装个第三方工具(360助手之类的,方便连接模拟调试)

2、调试

(运行?真机运行?选择第一个HBuilder基座运行-把HBuilder调查WebView模式,调试时点击右边)在这里插入图片描述

vue-cli或vue项目利用HBuilder打包成移动端app操作

3、调试完后,进行发行

(1)点击发行,发行为原生安装包

(2)点击使用DCloud公用证书,点击打包

(3)等待制作,下载

4、安装

(1)可直接通过360助手来安装,或者用qq或其他发送到手机上安装,如不能直接安装,就到手机上文件管理找到文件点击安装即可

补充知识:vue-cli打包成apk的完整方法和打包成app所遇到的问题

vue-cli适合写spa(单页面应用程序),因此,我们常会用它来开发app,当我们在pc端开发完成之后,肯定需要打包成apk或者ios(ios我在这里先不阐述)。

我的方法是利用hbuilder来构建apk文件。我们将vue项目创建好后,cd项目文件夹,输入npm run dev(3.0以下版本的命令)/npm run serve(3.0以上命令),打开浏览器,在8080(默认)下查看是否正常显示。

然后用npm run build命令将vue项目进行打包,打包完成后,在项目文件夹中多了一个dist文件夹,这时我们用hbuilder打开vue项目,

vue-cli或vue项目利用HBuilder打包成移动端app操作

右键将之转换成移动app,如果这时候直接将之打包成apk,则会遇到一个巨大的问题,那就是apk安装之后,内容都是空白,没有一点东西,原因就是:路径问题,路径问题,路径问题(重要的事情说三篇),打包好后,所有的路径都是/开头的,/开头表示从根目录开始,而我们需要做的就是将dist项目中的所有/都改为./,./的意思就是当前目录。

vue-cli或vue项目利用HBuilder打包成移动端app操作

然后点击在项目栏中的发行——>云打包,打原生安装包——>最后点击打包完成(如果遇到要配置参数,按需求配置即可).

下图就是我将打包好的apk安装到手机之后的图片。

vue-cli或vue项目利用HBuilder打包成移动端app操作

以上这篇vue-cli或vue项目利用HBuilder打包成移动端app操作就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
JavaScript 自动完成脚本整理(33个)
Oct 20 Javascript
Jquery ajaxsubmit上传图片实现代码
Nov 04 Javascript
JavaScript游戏之是男人就下100层代码打包
Nov 08 Javascript
jquery 绑定回车动作扑捉回车键触发的事件
Mar 26 Javascript
深入分析JSONP跨域的原理
Dec 10 Javascript
js判断某个方法是否存在实例代码
Jan 10 Javascript
ECMAScript6快速入手攻略
Jul 18 Javascript
JSP防止网页刷新重复提交数据的几种方法
Nov 19 Javascript
JavaScript中定义对象原型的两种使用方法
Dec 15 Javascript
基于vue展开收起动画的示例代码
Jul 05 Javascript
javascript实现倒计时提示框
Mar 02 Javascript
JavaScript中时间格式化新思路toLocaleString()
Nov 07 Javascript
小程序实现列表展开收起效果
Jul 29 #Javascript
jquery实现简单自动轮播图效果
Jul 29 #jQuery
解决vue-photo-preview 异步图片放大失效的问题
Jul 29 #Javascript
vue 组件间的通信之子组件向父组件传值的方式
Jul 29 #Javascript
vue-preview动态获取图片宽高并增加旋转功能的实现
Jul 29 #Javascript
vuex管理状态仓库使用详解
Jul 29 #Javascript
解决vue项目获取dom元素宽高总是不准确问题
Jul 29 #Javascript
You might like
用PHP代码给图片加水印
2015/07/01 PHP
PHP中file_exists使用中遇到的问题小结
2016/04/05 PHP
PHP Trait代码复用类与多继承实现方法详解
2019/06/17 PHP
thinkPHP5.1框架中Request类四种调用方式示例
2019/08/03 PHP
Windows服务器中PHP如何安装redis扩展
2019/09/27 PHP
Web层改进II-用xmlhttp 无声息提交复杂表单
2007/01/22 Javascript
js报错 Object doesn't support this property or method的原因分析
2011/03/31 Javascript
js计算字符串长度包含的中文是utf8格式
2013/10/15 Javascript
jQuery删除节点的三个方法即remove()detach()和empty()
2013/12/27 Javascript
node.js中的fs.lstatSync方法使用说明
2014/12/16 Javascript
js实现Form栏显示全格式时间时钟效果代码
2015/08/19 Javascript
js判断是否为空和typeof的用法(详解)
2016/10/07 Javascript
微信小程序 video组件详解
2016/10/25 Javascript
JS设置随机出现2个数字的实例代码
2017/07/19 Javascript
日期时间范围选择插件:daterangepicker使用总结(必看篇)
2017/09/14 Javascript
详解vue mint-ui源码解析之loadmore组件
2017/10/11 Javascript
微信小程序input框中加入小图标的实现方法
2018/06/19 Javascript
jQuery实现简单的Ajax调用功能示例
2019/02/15 jQuery
[02:42]完美大师赛主赛事淘汰赛第三日观众采访
2017/11/25 DOTA
Python中decorator使用实例
2015/04/14 Python
使用python Fabric动态修改远程机器hosts的方法
2018/10/26 Python
Django实现微信小程序的登录验证功能并维护登录态
2019/07/04 Python
使用PyCharm安装pytest及requests的问题
2020/07/31 Python
快速一键生成Python爬虫请求头
2021/03/04 Python
size?丹麦官网:英国伦敦的球鞋精品店
2019/04/15 全球购物
人事部主管岗位职责
2013/12/26 职场文书
普通员工辞职信
2014/01/17 职场文书
幼师自我鉴定
2014/02/01 职场文书
中考标语大全
2014/06/05 职场文书
节电标语大全
2014/06/23 职场文书
2014基建处领导班子“四风”对照检查材料思想汇报
2014/10/04 职场文书
期中考试复习计划
2015/01/19 职场文书
房产公证书
2015/01/23 职场文书
Html5调用企业微信的实现
2021/04/16 HTML / CSS
python 远程执行命令的详细代码
2022/02/15 Python
nginx 添加http_stub_status_module模块
2022/05/25 Servers