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 相关文章推荐
FF IE兼容性的修改小结
Sep 02 Javascript
JavaScript操作Cookie详解
Feb 28 Javascript
AngularJS入门教程之静态模板详解
Aug 18 Javascript
利用jQuery来动态为属性添加或者删除属性的简单方法
Dec 02 Javascript
原生JS中slice()方法和splice()区别
Mar 06 Javascript
微信小程序获取音频时长与实时获取播放进度问题
Aug 28 Javascript
vue的全局变量和全局拦截请求器的示例代码
Sep 13 Javascript
微信小程序页面间跳转传参方式总结
Jun 13 Javascript
从零使用TypeScript开发项目打包发布到npm
Feb 14 Javascript
antd-日历组件,前后禁止选择,只能选中间一部分的实例
Oct 29 Javascript
如何使用RoughViz可视化Vue.js中的草绘图表
Jan 30 Vue.js
quickjs 封装 JavaScript 沙箱详情
Nov 02 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中显示格式化的用户输入
2006/10/09 PHP
MySQL修改密码方法总结
2008/03/25 PHP
Wordpress php 分页代码
2009/10/21 PHP
解决ThinkPHP关闭调试模式时报错的问题汇总
2015/04/22 PHP
PHP实现QQ快速登录的方法
2016/09/28 PHP
PHP使用curl函数发送Post请求的注意事项
2016/11/26 PHP
Javascript匿名函数的一种应用 代码封装
2010/06/27 Javascript
JS实现静止元素自动移动示例
2014/04/14 Javascript
jQuery产品间断向下滚动效果核心代码
2014/05/08 Javascript
使用JS画图之点、线、面
2015/01/12 Javascript
js中跨域方法原理详解
2015/07/19 Javascript
延时加载JavaScript代码提高速度
2015/12/27 Javascript
JavaScript浏览器对象之一Window对象详解
2016/06/03 Javascript
JS闭包的几种常见形式实例详解
2017/09/16 Javascript
react-native组件中NavigatorIOS和ListView结合使用的方法
2017/09/30 Javascript
easyui下拉框动态级联加载的示例代码
2017/11/29 Javascript
vue中$set的使用(结合在实际应用中遇到的坑)
2018/07/10 Javascript
js实现随机数小游戏
2019/06/28 Javascript
Vue全局loading及错误提示的思路与实现
2019/08/09 Javascript
python使用tornado实现简单爬虫
2018/07/28 Python
python求质数的3种方法
2018/09/28 Python
python 对key为时间的dict排序方法
2018/10/17 Python
Python自动抢红包教程详解
2019/06/11 Python
python tkinter窗口最大化的实现
2019/07/15 Python
python使用matplotlib绘制雷达图
2019/10/18 Python
自学python用什么系统好
2020/06/23 Python
使用phonegap获取设备的一些信息方法
2017/03/31 HTML / CSS
香港迪士尼乐园酒店预订:Hong Kong Disneyland Hotels
2017/05/02 全球购物
Skyscanner阿联酋:全球领先的旅游搜索平台
2017/11/25 全球购物
高中毕业生自我鉴定范文
2013/09/26 职场文书
教师岗位职责
2013/11/17 职场文书
企业办公室岗位职责
2014/03/12 职场文书
团委竞选演讲稿
2014/04/24 职场文书
感恩父母的演讲稿
2014/05/06 职场文书
pycharm debug 断点调试心得分享
2021/04/16 Python
教你怎么用PyCharm为同一服务器配置多个python解释器
2021/05/31 Python