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 相关文章推荐
js中更短的 Array 类型转换
Oct 30 Javascript
Jquery submit()无法提交问题
Apr 21 Javascript
javascript为下拉列表动态添加数据项
May 23 Javascript
Perl Substr()函数及函数的应用
Dec 16 Javascript
基于javascript简单实现对身份证校验
Jan 25 Javascript
JS实现刷新父页面不弹出提示框的方法
Jun 22 Javascript
基于Bootstrap 3 JQuery及RegExp的表单验证功能
Feb 16 Javascript
详解Vue 2.0封装axios笔记
Jun 22 Javascript
vue elementui form表单验证的实现
Nov 11 Javascript
微信小程序云开发之模拟后台增删改查
May 16 Javascript
原生JavaScript实现贪吃蛇游戏
Nov 04 Javascript
JavaScript实现登录窗体
Jun 22 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
114啦源码(114la)不能生成地方房产和地方报刊问题4级页面0字节的解决方法
2012/01/12 PHP
phpExcel导出大量数据出现内存溢出错误的解决方法
2013/02/28 PHP
Yii配置与使用memcached缓存的方法
2016/07/13 PHP
浅谈PHP安全防护之Web攻击
2017/01/03 PHP
Yii2.0建立公共方法简单示例
2019/01/29 PHP
用JavaScript编写COM组件的步骤
2009/03/17 Javascript
JS替换文本域内的回车示例
2014/02/18 Javascript
javascript实现json页面分页实例代码
2014/02/20 Javascript
javascript作用域和闭包使用详解
2014/04/25 Javascript
nodejs中使用monk访问mongodb
2014/07/06 NodeJs
javascript引擎长时间独占线程造成卡顿的解决方案
2014/12/03 Javascript
JavaScript中数组继承的简单示例
2015/07/29 Javascript
jQuery和hwSlider实现内容响应式可触控滑动切换效果附源码下载(二)
2016/06/22 Javascript
Vue.js每天必学之过渡与动画
2016/09/06 Javascript
简单分析javascript中的函数
2016/09/10 Javascript
JavaScript面试题大全(推荐)
2016/09/22 Javascript
基于jquery实现的鼠标悬停提示案例
2016/12/11 Javascript
Angular+Node生成随机数的方法
2017/06/16 Javascript
使用Fullpage插件快速开发整屏翻页的页面
2017/09/13 Javascript
VUE长按事件需求详解
2017/10/18 Javascript
微信小程序云开发 搭建一个管理小程序
2019/05/17 Javascript
Vue单页面应用中实现Markdown渲染
2021/02/14 Vue.js
Python中使用select模块实现非阻塞的IO
2015/02/03 Python
python发送HTTP请求的方法小结
2015/07/08 Python
numpy找出array中的最大值,最小值实例
2018/04/03 Python
Opencv图像处理:如何判断图片里某个颜色值占的比例
2020/06/03 Python
基于python计算滚动方差(标准差)talib和pd.rolling函数差异详解
2020/06/08 Python
通过实例解析python创建进程常用方法
2020/06/19 Python
三陽商会官方网站:Sanyo iStore
2019/05/15 全球购物
Conforama瑞士:家具、厨房、电器、装饰
2020/09/06 全球购物
负责人任命书范本
2014/06/04 职场文书
房地产销售主管岗位职责
2015/02/13 职场文书
2015年财务人员工作总结
2015/04/10 职场文书
2015年法律事务部工作总结
2015/07/27 职场文书
婚礼必备主持词范本!
2019/07/23 职场文书
Windows下使用Nginx+Tomcat做负载均衡的完整步骤
2021/03/31 Servers