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 相关文章推荐
IE不出现Flash激活框的小发现的js实现方法
Sep 07 Javascript
ext读取两种结构的xml的代码
Nov 05 Javascript
javascript 事件查询综合 推荐收藏
Mar 10 Javascript
jQuery移动页面开发中的触摸事件与虚拟鼠标事件简介
Dec 03 Javascript
基于jQuery实现点击弹出层实例代码
Jan 01 Javascript
webpack入门必知必会
Jan 16 Javascript
JavaScript表单验证完美代码
Mar 02 Javascript
Angularjs使用指令做表单校验的方法
Mar 31 Javascript
jQuery dateRangePicker插件使用方法详解
Jul 28 jQuery
webpack多入口文件页面打包配置详解
Jan 09 Javascript
vue iview组件表格 render函数的使用方法详解
Mar 15 Javascript
详解Axios 如何取消已发送的请求
Oct 20 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
在PWS上安装PHP4.0正式版
2006/10/09 PHP
PHP 判断变量类型实现代码
2009/10/23 PHP
thinkphp的静态缓存用法分析
2014/11/29 PHP
超级退弹代码
2008/07/07 Javascript
event.keyCode键码值表 附只能输入特定的字符串代码
2009/05/15 Javascript
根据出生日期自动取得星座的js代码
2010/07/20 Javascript
使用JavaScript构建JSON格式字符串实现步骤
2013/03/22 Javascript
JavaScript中的值是按值传递还是按引用传递问题探讨
2015/01/30 Javascript
JavaScript实现数字数组按照倒序排列的方法
2015/04/06 Javascript
详解基于Bootstrap扁平化的后台框架Ace
2015/11/27 Javascript
微信小程序开发之麦克风动画 帧动画 放大 淡出
2017/04/18 Javascript
[03:05]《我与DAC》之xiao8:DAC与BG
2018/03/27 DOTA
[50:17]Newbee vs Serenity 2018国际邀请赛小组赛BO2 第二场 8.17
2018/08/18 DOTA
Django开发中复选框用法示例
2018/03/20 Python
Python基于opencv实现的简单画板功能示例
2019/03/04 Python
python实现QQ空间自动点赞功能
2019/04/09 Python
django框架自定义模板标签(template tag)操作示例
2019/06/24 Python
利用python list完成最简单的DB连接池方法
2019/08/09 Python
Pycharm中出现ImportError:DLL load failed:找不到指定模块的解决方法
2019/09/17 Python
解决启动django,浏览器显示“服务器拒绝访问”的问题
2020/05/13 Python
Python通过类的组合模拟街道红绿灯
2020/09/16 Python
记一次Django响应超慢的解决过程
2020/09/17 Python
使用Python提取文本中含有特定字符串的方法示例
2020/12/09 Python
HTML5制作酷炫音频播放器插件图文教程
2014/12/30 HTML / CSS
互动出版网:专业书籍
2017/03/21 全球购物
NFL欧洲商店(德国):NFL Europe Shop DE
2018/11/03 全球购物
学前教育专业毕业生自荐信
2013/10/03 职场文书
房地产营销策划方案
2014/02/08 职场文书
幼儿园六一亲子活动方案
2014/08/26 职场文书
2015年党员自评材料
2014/12/17 职场文书
普宁寺导游词
2015/02/04 职场文书
Python中Numpy和Matplotlib的基本使用指南
2021/11/02 Python
十大公认最好看的动漫:《咒术回战》在榜,《钢之炼金术师》第一
2022/03/18 日漫
Nginx配置根据url参数重定向
2022/04/11 Servers
win10清理dns缓存
2022/04/19 数码科技
Spring boot实现上传文件到本地服务器
2022/08/14 Java/Android