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

一、背景

        最近公司框架升级改造，之前的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后便失去了作用