浅谈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 相关文章推荐
xml 与javascript结合的问题解决方法
Mar 24 Javascript
js判断鼠标同时离开两个div的思路及代码
May 31 Javascript
快速解决jQuery与其他库冲突的方法介绍
Jan 02 Javascript
document.addEventListener使用介绍
Mar 07 Javascript
jQuery+ajax实现无刷新级联菜单示例
May 21 Javascript
Javascript基于AJAX回调函数传递参数实例分析
Dec 15 Javascript
JavaScript实现带播放列表的音乐播放器实例分享
Mar 07 Javascript
浅谈js中StringBuffer类的实现方法及使用
Sep 02 Javascript
javascript定时器取消定时器及优化方法
Jul 08 Javascript
webpack4与babel配合使es6代码可运行于低版本浏览器的方法
Oct 12 Javascript
详解关于JSON.parse()和JSON.stringify()的性能小测试
Mar 14 Javascript
JS Object构造函数之Object.freeze
Apr 28 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
CodeIgniter基本配置详细介绍
2013/11/12 PHP
PHP+AJAX 投票器功能
2017/11/11 PHP
什么是JavaScript
2009/08/13 Javascript
JavaScript 对象模型 执行模型
2010/10/15 Javascript
Jquery增加鼠标中间功能mousewheel的实例代码
2013/09/05 Javascript
jQuery学习笔记之jQuery动画效果
2013/09/09 Javascript
使用js实现一个可编辑的select下拉列表
2014/02/20 Javascript
javascript实现控制的多级下拉菜单
2015/07/05 Javascript
jquery实现input框获取焦点的方法
2017/02/06 Javascript
bootstrapValidator 重新启用提交按钮的方法
2017/02/20 Javascript
JS检测是否可以访问公网服务器功能代码
2017/06/19 Javascript
Node.js中sequelize时区的配置方法
2017/12/10 Javascript
vue学习教程之带你一步步详细解析vue-cli
2017/12/26 Javascript
解决IE11 vue +webpack 项目中数据更新后页面没有刷新的问题
2018/09/25 Javascript
Vue安装浏览器开发工具的步骤详解
2019/05/12 Javascript
p5.js实现动态图形临摹
2019/10/23 Javascript
微信小程序实现吸顶特效
2020/01/08 Javascript
[43:57]Liquid vs Mineski 2019国际邀请赛小组赛 BO2 第二场 8.16
2019/08/19 DOTA
Python验证企业工商注册码
2015/10/25 Python
Ubuntu 16.04 LTS中源码安装Python 3.6.0的方法教程
2016/12/27 Python
Django与JS交互的示例代码
2017/08/23 Python
python密码错误三次锁定(实例讲解)
2017/11/14 Python
Python实现栈和队列的简单操作方法示例
2019/11/29 Python
Python使用扩展库pywin32实现批量文档打印实例
2020/04/09 Python
UI自动化定位常用实现方法代码示例
2020/10/27 Python
Python抓包并解析json爬虫的完整实例代码
2020/11/03 Python
详解CSS3浏览器兼容
2016/12/14 HTML / CSS
HTML5文档结构标签
2017/04/21 HTML / CSS
购买中国最好的电子产品:Geekbuying
2018/03/13 全球购物
eBay奥地利站:eBay.at
2019/07/24 全球购物
诚信承诺书范文
2014/03/27 职场文书
设计师求职信
2014/07/01 职场文书
小学竞选班干部演讲稿
2014/08/20 职场文书
公司财务部岗位职责
2015/04/14 职场文书
Django利用AJAX技术实现博文实时搜索
2021/05/06 Python
Pytorch 统计模型参数量的操作 param.numel()
2021/05/13 Python