关于vue+capacitor打包android后无法访问http问题的总结

Ionic + Vue3 + Capacitor 配置环境、打包应用常见问题 阅读详情

一、背景

        最近公司框架升级改造,之前的ionic+cordova+angluar的app框架舍弃不用,换成vue+ionic+capacitor框架。

二、遇到问题

         首先按照ionic官网的教程,用命令行生成vue+ionic框架,但根目录下并没有生成vue.config.js文件,按照之前的习惯,手动创建vue.config.js文件,并设置请求代理,如下图所示:

        在浏览器测试一切正常,很顺利的访问到了后台,但打包成android项目在手机上运行后,问题出现了,http请求似乎是被拦截了,后台根本不进断点,一开始考虑是跨域的问题,但后台代码已经做了跨域设置,就算不适用vue代理,也应该能正常访问。后来决定不使用代理,直接访问,发现也不行。

        后来考虑是ionic项目,发现项目根目录下有个ionic.config.json文件,经过查阅官方文档发现里面有介绍到在ionic.config.json文件中也可以设置代理,如下图所示:

         经过运行发现,此代理似乎并没有起什么作用,之后又看到网上有人说可以在capacitor.config.json中加入一个属性,如下图所示:

         依然不行,至此,项目陷入了僵局。

三、解决问题

         最后经过不屑的查找,终于找到了问题解决方案,需要在AndroidManifest.xml文件中加上一个属性,如下图:

        经查阅了解到Android 29版本之后的手机默认拒绝应用程序使用明文流量的请求,所以要么可以把请求改为https,要么可以在AndroidManifest.xml文件中加入

android:usesCleartextTraffic="true"

四、结论

        经过这个问题的解决,发现vue.config.js文件中设置的代理,虽然在浏览器中起作用,但打包成apk后便失去了作用

React Native Android9.0以上打包apk后http请求不到解决方法 错误原因:android9.0默认禁止访问不安全的请求,比如http。 解决方案: 方法1: 使用认证过的https(我用的是阿里云免费证书,因为使用https还得配置,所以用了http) 方法2: 分为两步 第一步:在res下新增加一个xml目录,然后创建一个名为network_security_config.xml文件 如下图: 文件内容如下: <?xml vers... 阅读详情

相关推荐

基于vue+ionic+capacitor的图书借阅app

前些时候,水壶哥使用vue开发了一套《图书管理系统》,这套系统只有pc端,联想到当前社会是智能社会,任何系统基本都配有移动端,所以本着再次让大家学到新技术的目的,水壶哥又开发了一套《图书管理系统》的移动端,这套系统采用vue+ionic+capacitor框架,是一套基于vue和ionic的入门系统,虽然是入门,但所用到的技术绝对是当今主流,后台依然采用《图书管理系统》的后台,没有任何变化。

冰咖啡的专栏 1645

从Web到全平台:Capacitor打包工具实战指南

如果内置API满足不了需求,比如对接企业内部的硬件设备,Capacitor支持用Swift(iOS)或Kotlin(Android)编写自定义插件,再通过JS桥接调用。这种“Web为主,原生补充”的模式,比纯原生开发效率高太多。Capacitor的出现,让“Web一次开发,全平台部署”从口号变成了现实。它既保留了Web开发的高效性,又通过优秀的原生集成能力弥补了Web应用的短板。如果你是前端开发者,想拓展自己的技术边界,或者需要快速交付跨平台应用,Capacitor绝对值得一试。

weixin_59731115的博客 3923

Capacitor 打包后接口访问不到的排查经历

【摘要】开发者使用Quasar+Capacitor6构建Android应用时,发现开发模式下接口正常,但打包成APK后无法获取验证码。通过调整Capacitor配置强制使用HTTP协议无效后,启用WebView远程调试功能发现跨域问题:WebView默认将origin视为http://localhost,而FastAPI后端未配置该来源。最终通过精准配置CORS白名单(包括http://localhost等具体域名)并保持凭证模式的一致性解决问题。关键收获是:1)启用WebView调试可查看真实网络请求;2

qq_61140658的博客 980

如何将Vue 项目转换为 Android App(使用Capacitor)

本文介绍了将Vue项目转换为Android应用的主要步骤: 准备工作:安装Node.js、Android Studio并打包Vue项目 使用Capacitor:安装Capacitor CLI,初始化配置并添加Android平台支持 构建APK:在Android Studio中打开项目并构建APK 网络请求适配:配置网络安全文件允许HTTP请求或改用HTTPS 应用图标适配:使用工具自动生成多尺寸图标或手动配置 开发流程为:修改Vue代码→重新打包→同步到Android项目→构建新APK。

fouryears_23417的博客 2148

Android Studio 打包 React 网页项目

本文介绍了使用Capacitor将Web应用打包为Android应用的主要步骤。内容包括安装Capacitor核心库和CLI工具、初始化配置、创建Android项目、代码同步以及打包流程。同时针对开发中常见问题提供了解决方案:HTTP资源访问限制可通过配置network_security_config.xml解决;Mixed Content问题通过设置androidScheme为http;跨域问题则启用CapacitorHttp插件绕过浏览器限制。文章还给出了相关配置文件的修改示例和命令行操作指引。

CC_Waiting的博客 315

Ionic 4 + Capacitor 定位实战:解决权限、兼容与桥接三大断层

定位功能在混合开发中远不止调用一个 API——它涉及浏览器 Geolocation API 兼容性、原生系统权限生命周期管理,以及 Capacitor 插件桥接时序控制。理解 FusedLocationProviderClient(Android)和 CLLocationManager(iOS)的底层机制,是实现高精度、低功耗、合规定位的前提;而 Ionic 4 绑定 Angular 7/8 的 AOT 编译约束,又决定了 TypeScript target 和插件版本的严格匹配要求。本文聚焦真实设备调试场

weixin_30920853的博客 398

vue+vite项目,Capacitor打包APK

本文详细介绍了基于Vite 5 + Capacitor 6构建Android应用的全流程,涵盖环境配置(Node.js ≥18、JDK 17、Android Studio)、项目初始化、打包参数设置、资源同步及APK生成。重点说明了capacitor.config.json中server配置以支持HTTP明文请求,强调包名(appId)不可随意修改,并提供调试与发布版本的构建方法。同时针对常见问题如SDK访问失败、Gradle路径错误、Java版本不匹配等给出解决方案,确保开发流程顺畅高效。

weixin_42214237的博客 430

3D Slicer中Auto3DSeg和TotalSegmentator等自动分割插件总是安装失败,怎么办?教你两招

TotalSegmentator, MONAI auto3Dseg,这些工具因分割器官多,准确性高,备受关注。同时,这些自动分割工具被集成在了3D slicer平台,非常方便临床医生做手术规划。详细了解这些工具看之前的教程👇-------- 简单概述 --------其中,MONAIAuto3DSeg扩展附带数十种针对特定临床用例的预训练分割模型,这些模型旨在快速运行,几分钟内即可在任何普通计算机上运行,无需 GPU,甚至在笔记本电脑上。

zzjlhlcd的博客 1693

capacitor集成的安卓项目无法请求http的问题(安卓项目无法请求http).docx

上一篇文章我们提到了用capacitor集成安卓项目的方法,但是还有问题需要解决:打包好的apk安装后,软件无法进行http请求……在这里有一些配置和问题需要注意一下。

hahai_的博客 1097

学习笔记——神经科学的数学基础

m%3D2X_%7Bi%7DiNy%3DAxW%3DABx_%7Bj%7Dy_%7Bi%7Dy%3DWxt=N7T8卷积神经网络(CNN)详细介绍及其原理详解_IronmanJay的博客-CSDN博客https://blog.csdn.net/IronmanJay/article/details/128689946?

zxyopenstar的博客 1368

物料分类账-返工工单(自身)差异分摊逻辑

如上图所示,当月入库的全部消耗,而返工消耗的数量为100PCS,所以返工消耗占总消耗的比例为100pcs/(205pcs+100pcs)=0.327868852。备注:红色箭头的物料号为产品自己本身所产生的价差,就是返工工单所承担的差异,而我们要计算的就是这个值,所以计算价差不会包括此项。价差合计就是不包括初始分摊的价差9153.7,剩下的价差合计就是返工工单自身所承担的差异4465.21。每一次返工工单所承担的差异都会按照价差*承担比例去计算承担的差异,知道承担完所有差异。

Yeol827的博客 2439

Vue3项目打包安卓Apk:Ionic+Capacitor本地构建完整指南

在Web前端开发中,将Vue3单页应用打包成安卓安装包一直是工程化交付的常见需求。不同于传统的Hybrid App方案或重写技术栈,Ionic工具链提供了一条兼顾复用与原生能力的路径。通过Capacitor这一原生容器桥接层,开发者可以将现有Vite或Vue CLI构建的工程直接接入Android原生壳,无需重构页面组件,即可复用相机、文件存储等系统能力。本地构建流程依赖Java、Gradle与Android SDK的版本匹配,配合相对路径配置与安全网络策略,即可在命令行或Android Studio中稳定

weixin_33164198的博客 339

YOLOv11改进 | 细节涨点篇 | DySample一种最新的轻量化动态上采样算子(效果完爆CARAFE)

本文给大家带来的最新改进机制是一种号称超轻量级且有效的动态上采样器——DySample。与传统的基于内核的动态上采样器相比,DySample采用了一种基于点采样的方法,相比于以前的基于内核的动态上采样器,DySample具有更少的参数、浮点运算次数、GPU内存和延迟。此外,DySample在包括语义分割、目标检测、实例分割、全景分割和单目深度估计在内的五个预测任务中,性能均优于其他上采样器(截至目前最有效的上采样算子),

Snu77的博客 4179

Vue3项目打包Android APK:Ionic+Capacitor本地实践指南

混合应用开发是前端工程师快速进入移动端的常用途径,其核心思路是将Web技术封装进原生容器。Vue3作为当前主流前端框架,配合Ionic组件库与Capacitor原生桥接层,可以在不触碰Java/Kotlin的前提下,把现有Vue3项目构建为可安装的Android APK。Vue3负责页面交互,Ionic提供接近原生的UI组件,Capacitor则启动WebView容器并统一管理原生能力。这种方式显著降低了从Web到移动端的迁移成本,尤其适合已有前端代码、需要快速产出安装包的团队。本文从环境准备、工程创建、C

weixin_29967445的博客 323

【YOLOv13[基础]】热力图可视化实践 | 脚本升级 | 优化可视化效果 | 论文必备 | GradCAMPlusPlus, GradCAM, XGradCAM, EigenCAM等

本文将进行添加YOLOv13版本的升级版热力图可视化功能的实践,支持图像热力图可视化、优化可视化效果、 可以选择使用GradCAMPlusPlus, GradCAM, XGradCAM, EigenCAM, HiResCAM, LayerCAM, RandomCAM, EigenGradCAM。一个参数即可设置是否显示检测框等。

静谧、淡雅 635

解决微信小程序长页面滚动到底部点击底部的输入框后输入框漂浮且页面滚动到顶部

一、问题描述 项目中有一个长页面上部展示部分信息下部为信息录入,页面长度为三屏幕(不同手机屏幕大小略有差异),当滚动到第二屏或者第三屏去填写信息时点击输入框后输入框漂浮起来了并且页面向上滚动了一段距离,回到了第一屏中展示的内容。效果如图。 滚动到第二屏,证件号输入。 点击输入框 可以看到证件号输入框漂浮了起来并且页面滚动到了第一屏展示的内容。 注意:小程序是2018年上线,在2020年4月份之前该页面从未出现过这种现象。推测:微信的后续更新中对微信小程序基础库进行了重构,导致点击输入框后页

仰望星空的代码 3250

Vue3(Vite)打包安卓APP 完整最佳实践

本文提供了Vue3(Vite)项目打包为安卓APP的完整实践指南,重点对比了Capacitor和HBuilderX两种主流方案。 核心内容: 方案选型:推荐Capacitor(原生工程控制)或HBuilderX(快速云打包),Cordova已过时不推荐 通用配置:必须修改Vite基础路径为相对路径,使用Hash路由模式,规范静态资源引用方式 Capacitor详细流程:包括初始化配置、Android平台添加、开发工作流、原生优化及打包签名 HBuilderX快速方案:适合简单项目,注意dist文件替换和路径

循环编织时间年轮,递归叩问存在本质,谁能在硅基荒原上,种出思想的玫瑰…… 258

华为OD机试双机位A卷 - VLAN资源池 (C++ & Python & JAVA & JS & GO)

华为OD机试2025双机位A卷 VLAN资源池,提供Java、C++、Python、Go、JavaScript源码实现,并提供完整思路讲解

qq_45776114的博客 875

前端vue使用capacitor打包安装apk相关设置

名称</string>android/app/src/main/AndroidManifest.xml文件。<string name="app_name">名称

huanghy_的博客 215

SPV1050低功耗微功率太阳能充电管理模块原理图设计,已量产

在物联网应用快速普及的今天,户外低功耗传感器(如土壤温湿度、环境光照、无线节点等)的供电始终是行业痛点 —— 传统锂电池不仅需要定期更换,维护成本高,还难以满足 “终身免维护” 的场景需求。为此,我们设计了一款专为 1V~3V 低电压小型太阳能板优化的微功率太阳能电源管理模块,结合 USB 备用充电路径,实现了低功耗传感器的长期自主供电。

不脱发的程序猿 436

文档:亲测可用解决vnc灰屏,黑屏,鼠标大黑叉情况

主要解决vnc-viewer灰屏,黑屏,鼠标大黑叉等现象,详细见文档。

Capacitor跨平台开发基础

Capacitor 允许使用现代 web 技术来构建可在任意平台中运行的应用,从 web 浏览器到移动设备(Android 和 iOS),甚至是通过 Electron(Github 上比较流行的使用 Node.js 和前端 web 技术构建跨平台桌面应用的技术)构建的桌面应用平台。用 Capacitor CLI 的 open 命令在本地 IDE(在我们的示例中为Android Studio)中打开你的原生项目;用 Capacitor CLI 的 open 命令在本地在Xcode 中打开你的原生项目;

2403_87976193的博客 943

C# WinForm 基于DirectShow.dll编写的程序,可边预览边保存视频,音频和图片

基于微软的DirectShow.dll的二次开发1.自动识别连接的摄像头跟麦克风且可以对其进行选择(默认选中第一个)2.可录制wmv和avi两种格式的视频并且都带有音频,avi可以录制的分辨率和帧数进行选择,wmv默认进行了淸晰度优化如不喜欢可去除代码中有相关提示3.可在预览点开之后进行拍照,也可边录制视频边拍照4.添加了视频和音频的压缩功能(酌情使用)这次二次开发发现C#对DirectShow的相关信息太少,这次做完也不敢藏私共享出来,还望大家指正

Vue项目打包成Android/iOS应用:从npm run build到Capacitor上架全攻略

前端项目中,打包产物本质上仍是HTML、CSS和JavaScript,移动端需要借助WebView这类“壳”来运行。将Vue项目打包成Android/iOS应用,核心思路就是为网页套上一个原生容器,并补充相机、定位等原生能力。Capacitor作为现代混合应用方案,让Vue开发者无需重写代码,即可把dist目录同步为Android和iOS工程,再通过Android Studio或Xcode完成签名、打包与上架。这套流程适合已有Web项目、需要快速输出手机应用的团队,也避免了跨端框架重写的成本。不过路由模式、

weixin_34337381的博客 204

android 蓝牙通讯demo

android 下蓝牙通讯demo,实现了发现蓝牙,使能蓝牙,通过蓝牙发送消息。

jre9下载 jdk9

(Java SE Runtime Environment 9.0) 9.0u175 官方最新版 【x86|x64】

Capacitor + Ionic 混合开发实践指南:在 android-dev 技能中构建 Web 团队适用的 Android 应用

> 本指南以 AAS(agentic-awesome-skills)仓库内 `android-dev` 技能的混合开发参考文档 [hybrid.md](https://pre-link.gitcode.com/i/46e1bc371789458675e8fc1806cbe323) 为主体,系统讲解 Capacitor + Ionic / React 混合应用从技术选型、项目搭建、原生能力接入到构建

gitblog_00139的博客 467

springboot+vue3安卓Android个人健康体检预约系统APP的设计与实现

"的Toast消息。作为主要的数据存储解决方案,使用 MySQL 数据库与后端服务进行集成,通过 Spring Boot 的数据访问技术来简化与 MySQL 数据库的交互,确保数据的安全性和一致性。(5)写Controller.java,连接页面请求和服务层,获取页面请求的参数,通过自动装配,映射不同的URL到相应的处理函数,并获取参数,对参数进行处理,之后传给服务层。维护:android系统的更新总是很快,而且不总是向后兼容的,所以设计一个程序并不难,如何让它适应不同版本的os是有难度的。

qq840612233的博客 380

Vue3+Vite项目打包APK:解决WebView白屏与样式失效的完整指南

移动端混合开发中,将前端项目打包为安卓APK是常见需求,但Vue3 + Vite构建产物与WebView本地加载机制之间存在天然断层,导致白屏、样式错乱频发。Vite默认使用绝对路径资源引用、history路由以及ES Modules加载方式,这些在HTTP服务器上运行良好,却无法适应file协议下的本地资源读取规则。理解base路径与路由模式的原理,成为解决打包问题的关键。通过将base改为'./'、切换至hash路由、合理配置Android WebView的asset加载器,可以有效规避协议差异带来的渲

weixin_30399155的博客 319
上一篇: 苹果Mac Os系统安装nvm、svn、打开真机控制台
下一篇: 基于vue+ionic+capacitor的图书借阅app
西山水壶
西山水壶 新星创作者: 前端开发技术领域 新星创作者: 前端开发技术领域
博客等级 码龄18年 5010粉丝 63原创
评论 3
成就一亿技术人!
拼手气红包6.0元
还能输入1000个字符
 
 条评论被折叠 查看
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付:10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

西山水壶

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值