浅谈vue项目利用Hbuilder打包成APP流程,以及遇到的坑


Posted in Javascript onSeptember 12, 2020

1.打包项目

期间遇到的坑,提前说下,避免重复工作。

1.1打包的app出现白屏。

出现原因:路径不对,需要改config\index.js

解决办法:修改打包的路径。

浅谈vue项目利用Hbuilder打包成APP流程,以及遇到的坑

1.2点击页面跳转不了,报 Loading chunk 2 failed. 等错误。

出现原因:不能用history配置路由,要用hash

解决办法:修改路由mode属性为hash。

浅谈vue项目利用Hbuilder打包成APP流程,以及遇到的坑

1.3.点手机物理按钮,直接退出程序。

出现原因:无理返回键直接用监听不到路由,会直接退出程序。

解决办法:可以引入mui,就能正常使用了。

1.在webpack.base.conf.js里面引入mui。(图一)

2.下载mui相关文件,在main.js里面引入。(若需要使用mui其他方法,请自行查阅资料)(图二)

3.这个时候,引入mui可能会报错,我们需要修改一些文件。(图三)

浅谈vue项目利用Hbuilder打包成APP流程,以及遇到的坑

(图一)

浅谈vue项目利用Hbuilder打包成APP流程,以及遇到的坑

(图二)

浅谈vue项目利用Hbuilder打包成APP流程,以及遇到的坑

(图二)

浅谈vue项目利用Hbuilder打包成APP流程,以及遇到的坑

浅谈vue项目利用Hbuilder打包成APP流程,以及遇到的坑

(图三)

2.Hbuilder发布

2.1创建项目5+App项目

浅谈vue项目利用Hbuilder打包成APP流程,以及遇到的坑

2.2 替换文件

先删除默认的css、img、js、index.html等无用默认文件。再将打包好的dist文件夹下的static和index.html文件,放至新建的项目下。

相关app的配置可自行在manifest.json中修改,这里不做详细说明。

浅谈vue项目利用Hbuilder打包成APP流程,以及遇到的坑

2.3利用云打包发布APP

如有证书,就填写证书等信息,若没有可临时用Dcloud公用证书。

填完信息,点击打包即可,之后就等待打包生成app的下载链接,进行下载安装啦。

浅谈vue项目利用Hbuilder打包成APP流程,以及遇到的坑

浅谈vue项目利用Hbuilder打包成APP流程,以及遇到的坑

个人记录~

补充知识:记录 vue项目打包放入 hbuilder 做app真机测试时 无法请求后台服务接口

1.因为发布app时 vue开发模式下配置的跨域是无效的,打包后会找不到接口

例如下面是之前的错误版:

'/propertyCmsAPI': {
    target: 'http://192.168.1.111:9001/',
    changeOrigin: true,
    pathRewrite: {
     '^/propertyCmsAPI':''
    }
   },

在使用时:

export const logout = params =>{return axios.post(`/propertyCmsAPI/notIntercept/logout`,params)};

这种方法在网页端打包是没有问题的,只需要在nginx 里配置下跨域就可以访问。

但是在做app时这样是访问不到数据的,因为不存在跨域的说法,打包成app后实际访问的路径就是 /propertyCmsAPI/notIntercept/logout ,这样会找不到接口,要采用绝对路径的方式,

例如:http://192.168.1.111:9001/notIntercept/logout,这样才能访问,不管你怎样配置管理你的请求api,这个是必须得,

下面是我更改后的做法正确版,完全适用:

let propertyCmsAPI = "http://112.74.126.167:9001";//打包APP时使用

// let propertyCmsAPI = "propertyCmsAPI";

分为开发模式和打包模式,然后统一管理所有请求api:

浅谈vue项目利用Hbuilder打包成APP流程,以及遇到的坑

其他应该还有更好的方法,懒得研究了,目的已达到,效果已实现即可。

这一切弄好了之后就是打包,然后放入Hbuilder 编辑器进行联机测试,

2.联机测试:

安卓机,真香

1.只需要把你的手机通过USB连接电脑,2.打开手机的开发者模式,3.选择USB可以传输文件,4.打开USB调式模式,5.确认电脑可以访问该手机。

只要在hbuilder 运行里 找到你的手机点击运行就可以,会在手机安装测试app,接下来就可以测试了,很给力

苹果机,真臭

手机电脑连接苹果手机要什么鬼itues ,老子光是安装这个玩意都整了一个小时才让电脑连上手机,这个先不提

在hbuilder运行里找到iPhone点击运行后,会安装测试app,然后你要在 设置-通用里管理这个app,要选择信任才行,否则你是打不开你的测试app的

打开app后最最操蛋的事情是他丫的居然访问不了接口,控制台打印拦截器的请求信息,响应信息,发现点击请求后直接就进入catch了,根本不执行请求,错误提示就一个newwork error ,就这一个问题,整了一下午

各种搜索,百度,包括hbuilder官网给出的解决问题的方法,在原vue项目中又是引入qs ,又是引入es6-primse,然并卵

最后的最后在项目的manife.json配置中添加了一个配置:在plus的下面

"kernel":{
 "ios":"UIWebview"
},

不是专业app开发,表示不懂,问题解决,记录下日志

以上这篇浅谈vue项目利用Hbuilder打包成APP流程,以及遇到的坑就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
javascript 循环读取JSON数据的代码
Jul 17 Javascript
JavaScript prototype属性深入介绍
Nov 27 Javascript
Javascript实现滚动图片新闻的实例代码
Nov 27 Javascript
javascript和jquery实现设置和移除文本框默认值效果代码
Jan 13 Javascript
jQuery实现自动调整字体大小的方法
Jun 15 Javascript
20分钟轻松创建自己的Bootstrap站点
May 12 Javascript
AngularJS入门教程中SQL实例详解
Jul 27 Javascript
React Native实现进度条弹框的示例代码
Jul 17 Javascript
vue写一个组件
Apr 09 Javascript
重学JS 系列:聊聊继承(推荐)
Apr 11 Javascript
详解vue-cli+es6引入es5写的js(两种方法)
Apr 19 Javascript
Vue监听滚动实现锚点定位(双向)示例
Nov 13 Javascript
解决vue项目 build之后资源文件找不到的问题
Sep 12 #Javascript
vue项目打包为APP,静态资源正常显示,但API请求不到数据的操作
Sep 12 #Javascript
vue v-on:click传递动态参数的步骤
Sep 11 #Javascript
vue Cli 环境删除与重装教程 - 版本文档
Sep 11 #Javascript
在vue中使用cookie记住用户上次选择的实例(本次例子中为下拉框)
Sep 11 #Javascript
请求时token过期自动刷新token操作
Sep 11 #Javascript
vue+axios 拦截器实现统一token的案例
Sep 11 #Javascript
You might like
php对二维数组按指定键值key排序示例代码
2013/11/26 PHP
简单的php中文转拼音的实现代码
2014/02/11 PHP
php根据isbn书号查询amazon网站上的图书信息的示例
2014/02/13 PHP
php抽象类使用要点与注意事项分析
2015/02/09 PHP
PHP和C#可共用的可逆加密算法详解
2015/10/26 PHP
Javascript 不能释放内存.
2006/09/07 Javascript
WEB页子窗口(showModalDialog和showModelessDialog)使用说明
2009/10/25 Javascript
不同的jQuery API来处理不同的浏览器事件
2012/12/09 Javascript
基于JavaScript自定义构造函数的详解说明
2013/04/24 Javascript
window.navigate 与 window.location.href 的使用区别介绍
2013/09/21 Javascript
js登录弹出层特效
2014/03/07 Javascript
jquery查找父元素、子元素(个人经验总结)
2014/04/09 Javascript
Firefox下无法正常显示年份的解决方法
2014/09/04 Javascript
node.js中RPC(远程过程调用)的实现原理介绍
2014/12/05 Javascript
Bootstrap选项卡动态切换效果
2016/11/28 Javascript
vue如何实现observer和watcher源码解析
2017/03/09 Javascript
jquery版轮播图效果和extend扩展
2017/07/18 jQuery
React Native中导航组件react-navigation跨tab路由处理详解
2017/10/31 Javascript
vue-resource + json-server模拟数据的方法
2017/11/02 Javascript
js实现tab栏切换效果
2020/08/02 Javascript
[03:36]DOTA2完美大师赛coL战队趣味视频——我演你猜
2017/11/23 DOTA
[20:30]职业巡回赛回顾
2018/08/09 DOTA
Python输出9*9乘法表的方法
2015/05/25 Python
Python使用自带的ConfigParser模块读写ini配置文件
2016/06/26 Python
python奇偶行分开存储实现代码
2018/03/19 Python
找Python安装目录,设置环境路径以及在命令行运行python脚本实例
2020/03/09 Python
python+requests接口压力测试500次,查看响应时间的实例
2020/04/30 Python
Currentbody德国站:健康与美容技术专家
2020/04/05 全球购物
2014三八妇女节活动总结范文四篇
2014/03/09 职场文书
英语教师求职信
2014/06/16 职场文书
绿色校园广播稿
2014/10/13 职场文书
2015应届毕业生自荐信范文
2015/03/05 职场文书
辣妈辣妹观后感
2015/06/10 职场文书
西安事变观后感
2015/06/12 职场文书
适合后台管理系统开发的12个前端框架(小结)
2021/06/29 Javascript
深入理解MySQL中MVCC与BufferPool缓存机制
2022/05/25 MySQL