浅谈vue项目利用Hbuilder打包成APP流程,以及遇到的坑
作者:wly_er 发布时间:2024-04-10 13:46:11
1.打包项目
期间遇到的坑,提前说下,避免重复工作。
1.1打包的app出现白屏。
出现原因:路径不对,需要改config\index.js
解决办法:修改打包的路径。
1.2点击页面跳转不了,报 Loading chunk 2 failed. 等错误。
出现原因:不能用history配置路由,要用hash
解决办法:修改路由mode属性为hash。
1.3.点手机物理按钮,直接退出程序。
出现原因:无理返回键直接用监听不到路由,会直接退出程序。
解决办法:可以引入mui,就能正常使用了。
1.在webpack.base.conf.js里面引入mui。(图一)
2.下载mui相关文件,在main.js里面引入。(若需要使用mui其他方法,请自行查阅资料)(图二)
3.这个时候,引入mui可能会报错,我们需要修改一些文件。(图三)
(图一)
(图二)
(图二)
(图三)
2.Hbuilder发布
2.1创建项目5+App项目
2.2 替换文件
先删除默认的css、img、js、index.html等无用默认文件。再将打包好的dist文件夹下的static和index.html文件,放至新建的项目下。
相关app的配置可自行在manifest.json中修改,这里不做详细说明。
2.3利用云打包发布APP
如有证书,就填写证书等信息,若没有可临时用Dcloud公用证书。
填完信息,点击打包即可,之后就等待打包生成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:
其他应该还有更好的方法,懒得研究了,目的已达到,效果已实现即可。
这一切弄好了之后就是打包,然后放入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开发,表示不懂,问题解决,记录下日志
来源:https://blog.csdn.net/wly_er/article/details/97110493
猜你喜欢
- 当你检查scrapy二进制文件时,你会注意到这么一段python script#!/usr/bin/pythonfrom scrapy.cm
- python编写的语音天气预报本系统主要包括四个函数:1、获取天气数据1、输入要查询天气的城市2、利用urllib模块向中华万年历天气api
- 初步认识对于熟悉matplotlib三维画图的人来说,最常用的应该是plot_surface,但这个函数的绘图逻辑是,将xy平面映射到z轴,
- 来源:奥索网 桌面中心(二)数据库写入作者:elong 一、以下是数据库的写入的html程序,你可以加入密码功能。把密码做成变量发入下面那个
- 本文实例为大家分享了python机器人行走步数问题,供大家参考,具体内容如下#! /usr/bin/env python3 # -*- co
- import requestsimport reimport jsonimport ossession = requests.session
- 一、出错情况 有些时候当你重启了数据库服务,会发现有些数据库变成了正在恢复、置疑、可疑等情况,这个时候DBA就会很紧张了,下面是一些在实践中
- Python3 使用pillow库生成随机验证码的代码如下所示:import random# pillow 包的使用from PIL imp
- 1 运行SQLPLUS工具 sqlplus 2 以OS的默认身份连接 / as sysdba 3 显示当前用户名 show user 4 直
- 在web运行中很重要的一个功能就是加载静态文件,在django中可能已经给我们设置好了,我们只要直接把模板文件放在templates就好了,
- MySQL凭借着出色的性能、低廉的成本、丰富的资源,已经成为绝大多数互联网公司的首选关系型数据库。虽然性能出色,但所谓“好马配好鞍”,如何能
- 本文实例讲述了Python3.5多进程原理与用法。分享给大家供大家参考,具体如下:进程类:Process示例及代码:(1)创建函数作为单进程
- 该章节我们将要学习如何将 word 文件转为 PDF文件,其实网上有很多种生成 PDF 的教程,不过绝大多数都是以 windows 为主的,
- 前言在写报表功能时遇到一个需要根据用户id分组查询最新一条钱包明细数据的需求,在写sql测试时遇到一个有趣的问题,开始使用子查询根据时间倒序
- 作为一位不懂代码的业余网页制 * 好者,常常羡慕专业程序人员在浏览器中编制出的效果超酷的一些多媒体作品。唉,无奈程序那东东,酶涩南学,非一日之
- 前言大家应该都有所体会,随着硬件层面的发展,linux系统多核已经是普通趋势,而mysql是单进程多线程,所以先天上对多进程的利用不是很高,
- 本文实例总结了Python实现string字符串连接的方法。分享给大家供大家参考,具体如下:以下基于python 2.7版本,代码片段真实有
- 本文实例讲述了python 队列基本定义与使用方法。分享给大家供大家参考,具体如下:队列的特征是:先进先出应用场景:消息通信、多进程间的协同
- 如何利用SSH(Shell)来备份和恢复MySQL数据库的方法 例如: 数据库参数为:: MySQL地址:mysql.dh.net MySQ
- 前言经常需要检查一个“目录或文件夹”内部有没有我们想要的文件或者文件夹,就需要我们循环迭代出所有文件和子文件夹,Python中遍历指定目录下