vue 项目/备案网页/ip网页打包成 apk 安装到平板/手机(含vue项目跨域代理打包成apk后无法访问接口的解决方案)

下载安装HBuilder X编辑器

https://www.dcloud.io/hbuilderx.html

新建 5+APP 项目

打开 HBuilder X,新建项目

https://www.dcloud.io/hbuilderx.html
此处项目名以 ‘test’ 为例
在这里插入图片描述

含跨域代理的vue项目改造

若 vue 项目中含跨域代理,如 vue.config.js

module.exports = {publicPath: "./", // 【必要】静态文件使用相对路径outputDir: "./dist", //打包后的文件夹名字及路径devServer: {proxy: {"/myAPI": {target: " http://43.140.200.74:8810/", //换成你自己项目的开发或者生产地址ws: false, //也可以忽略不写,不写不会影响跨域changeOrigin: true, //是否开启跨域,值为 true 就是开启, false 不开启pathRewrite: {"^/myAPI": "", //注册全局路径, 但是在你请求的时候前面需要加上 /myAPI},},},},
};

则在打包成 apk 后会无法访问接口,因为app无跨域限制,不能使用跨域代理,需使用访问接口的绝对路径,如:原接口 “/myAPI/dmis/login” 需改为 “http://43.140.200.74:8810/dmis/login” 才能使用。

为了便捷,可通过修改 axios 配置文件实现,如在 src\axios.js 中按下图增加代码

在这里插入图片描述

axios.defaults.baseURL = "http://43.140.200.74:8810/";
config.url = config.url.replace("/myAPI", "");

植入vue 项目

若是 vue 项目,则保留新建的 test 项目中的 manifest.json 文件,将其他文件全部删掉,将 vue 项目打包后的文件拷贝到 test 项目中,范例如下图

原 vue 项目打包后的文件
在这里插入图片描述

植入vue 项目后的 test 项目
在这里插入图片描述

修改 manifest.json 配置

根据项目实际需求,修改 manifest.json 配置,常见的修改有:

应用名称,应用版本号,应用入口

在这里插入图片描述
若是将备案网页/ip网页打包成 apk,则将应用入口改成备案网页/ip网页地址即可,如

在这里插入图片描述

应用图标

点浏览选择png格式的图片后,点击 自动生成所有图标并替换 ,即可便捷更换应用图标

在这里插入图片描述

设置横竖屏

vue 项目/网页通常适配的pc上的横屏效果,所以打包时通常也需配置为横屏。
在这里插入图片描述

取消不必要的模块

默认配置了很多模块,如扫码、相机相册等,没涉及时建议取消,可减小apk包的大小。

在这里插入图片描述
特别是通讯录模块,因涉及用户敏感信息,打包时会需要进行认证,通常需要取消勾选。

开始打包

使用 HBuilder X 进行云打包

在这里插入图片描述
在这里插入图片描述
在这里插入图片描述

在这里插入图片描述
因云打包人较多,可能需要排队
在这里插入图片描述
完成排队,进入打包状态后,约需 2-5分钟完成打包
在这里插入图片描述
打包成功后,根据目录提示可找到最终的 apk 文件

在模拟器上安装测试

在电脑上下载安装 雷电模拟器
https://www.ldmnq.com/

打开 雷电模拟器,通过拖拽或浏览的方式安装 apk
在这里插入图片描述
安装成功后

在这里插入图片描述
单击打开即可

在这里插入图片描述

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.rhkb.cn/news/227118.html

如若内容造成侵权/违法违规/事实不符,请联系长河编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

《分布式事务理论基础:CAP定理 BASE理论》

目录 学习目标 1.分布式事务理论基础 1.1.本地事务 1.2.分布式事务 分布式事务产生的原因? 哪些场景会产生分布式事务? 单体系统会产生分布式事务问题吗? 只有一个库,会产生分布式事务问题吗? 分布式事务举…

跨进程通信 macOS XPC 创建实例

一:简介 XPC 是 macOS 里苹果官方比较推荐和安全的的进程间通信机制。 集成流程简单,但是比较绕。 主要需要集成 XPC Server 这个模块,这个模块最终会被 apple 的根进程 launchd 管理和以独立进程的方法唤起和关闭, 我们主app 进…

DotNet 命令行开发

DotNet 命令行开发 下载安装下载 SDK安装 SDK绿色版下载绿化脚本 常用命令创建 dotnet new运行 dotnet run发布应用 dotnet publish更多命令 VSCode 调试所需插件调试 CS 配置项目.csproj排除依赖关系 launch.jsontasks.json 参考资料 下载安装 下载 SDK 我们就下最新的好&am…

draw.io学习笔记

1、链接 1.1、自动连接图形 鼠标放在图形上,点击出现的箭头,会自动出常用图形 1.2、固定连接 如果拖动其中一个图形的话,固定链接的形状会是曲线连过去。 方法:不要点击左边图形鼠标放在边框上面左边出现绿圆点鼠标左键点击图形的…

LTPI协议的理解——2、LTPI实现的底层架构

提示:文章写完后,目录可以自动生成,如何生成可参考右边的帮助文档 LTPI协议的理解——2、LTPI实现的底层架构 前言一、体系结构三、实现细节四、物理接口信号传输方法总结 前言 前面讲了LTPI的定义和大概结构,接下来继续理解LTPI…

【Linux系统编程二十五】:线程概念(Linux中的轻量级进程)

【Linux系统编程二十五】:线程概念(Linux中的轻量级进程) 一.线程的概念1.地址空间是资源窗口 二.线程初步理解1.进程执行分支(内部运行)2.执行粒度更细3.重构进程概念:系统资源分配的基本实体4.重构线程概念:系统调度的基本单位5…

Kubernetes 学习总结(43)—— Kubernetes 从提交 deployment 到 pod 运行的全过程

当用户向 Kubernetes 提交了一个创建 deployment 的请求后,Kubernetes 从接收请求直至创建对应的 pod 运行这整个过程中都发生了什么呢? kubernetes 架构简述 在搞清楚从 deployment 提交到 pod 运行整个过程之前,我们有先来看看 Kubernete…

4. 云原生之kubesphere基础服务搭建

文章目录 安装kubesphere插件服务暴露NodePort方式LoadBalancer方式安装 OpenELB部署eip资源配置网关启动网关创建路由测试网关路由ingress高级功能在服务中配置LoadBalancer 基础设施部署服务部署建议helm仓库添加helm仓库 运维相关部署gitlab部署nexus3部署harbor 研发相关 安…

【c语言】飞机大战(1)

提前准备好游戏要的素材,可以到爱给网去找,飞机大战我们需要的是一个我方战机图片,一个背景图,三个敌方战机的图,我方战机的图片,敌方战机的图片,并且将图片和.cpp放在同一文件夹下. 这里创建.…

回归预测 | Python实现OOA-LightGBM基于人工鱼鹰优化算法优化LightGBM的多输入单输出数据回归预测模型 (多指标,多图)

回归预测 | Python实现OOA-LightGBM基于人工鱼鹰优化算法优化LightGBM的多输入单输出数据回归预测模型 (多指标,多图) 目录 回归预测 | Python实现OOA-LightGBM基于人工鱼鹰优化算法优化LightGBM的多输入单输出数据回归预测模型 (…

vue+element+springboot实现多张图片上传

1.需求说明 2.实现思路 3.el-upload组件主要属性说明 4.前端传递MultipartFile数组与服务端接收说明 5.完整代码 1.需求说明 动态模块新增添加动态功能,支持多张图片上传.实现过程中对el-upload组件不是很熟悉,踩了很多坑,当然也参考过别的文章,发现处理很…

2023总结与展望--Empirefree

今年一篇博客都没写过了,好像完全在忙在工作和生活上面了,珍惜自我,保持热情,2024对我好点 文章目录 🔥1. 年终总结1.1.学习工作计划1.2. 生活计划1.3 个人总结 🔥2. 未来展望 🔥1. 年终总结 1…

Windows Server 2012一键安装PHP5.4.45环境-护卫神

Windows Server 2012一键安装PHP环境(PHP5.4FastCGI模式) (hws.com)护卫神PHP套件|mysql安装|php环境|安装php (hws.com) 护卫神PHP套件|mysql安装|php环境|安装php

【无标题】《巴黎图书馆》,又发现一本书

我喜愛看的书(https://img-blog.csdnimg.cn/8cd84d33e6724f09a46831f75abe6464.jpg)在这里插入图片描述

Linux命令:wc -l计算文件中的行数

wc -l是一个Linux命令,用于计算文件中的行数。以下是wc -l命令的详细说明: 命令格式:wc -l [文件名] 选项: -l:仅计算文件中的行数。 用法: 如果不指定文件名,则wc -l命令将从标准输入读取数…

Nature | 大型语言模型(LLM)能够发现和产生新知识吗?

大型语言模型(LLM)是基于大量数据进行预训练的超大型深度学习模型。底层转换器是一组神经网络,这些神经网络由具有自注意力功能的编码器和解码器组成。编码器和解码器从一系列文本中提取含义,并理解其中的单词和短语之间的关系。通…

封装uniapp签字板

新开发的业务涉及到签字功能,由于是动态的表单,无法确定它会出现在哪里,不得已封装模块。 其中涉及到一个难点就是this的指向性问题, 第二个是微信小程序写法, 我这个写法里用了u-view的写法,可以自己修改组…

JavaScript:正则表达式

JavaScript:正则表达式 什么是正则表达式正则表达式语法定义正则表达式判断是否有匹配的字符串查找匹配的字符串 正则表达式匹配法则元字符边界符量词字符类 什么是正则表达式 正则表达式用于匹配字符串中字符的组合模式。 正则表达式会依据其自身语法,…

关键字:abstract关键字

在 Java 中,abstract是一个关键字,用于修饰类和方法。当一个类被声明为抽象类时,它不能被实例化,只能被其他类继承。同时,抽象类可以包含抽象方法,抽象方法没有方法体,只包含方法的签名&#xf…

计算机网络复习5

传输层——端到端 文章目录 传输层——端到端功能传输层的寻址与端口UDPTCPTCP连接管理TCP可靠传输TCP流量控制TCP拥塞控制网络拥塞的处理 功能 从通信和信息处理的角度看,传输层向它上面的应用层提供通信服务,它属于面向通信部分的最高层,同…