Vue+Capacitor打包安卓应用出现空白页问题求助

一、排查静态资源路径问题 #

• 检查Vue项目的配置文件：
  • 若使用Vue CLI，确保vue.config.js中设置publicPath: './'（相对路径避免本地打开时资源找不到）
  • 若使用Vite，确保vite.config.js中设置base: './'
• 重新执行构建与同步命令：

  npm run build
  npx cap sync android
  

二、处理CORS相关问题 #

1. 本地Chrome打开静态文件的跨域限制 #

直接通过Chrome打开本地dist目录下的index.html触发CORS错误，是浏览器默认的本地文件跨域限制导致，可通过命令行启动Chrome并关闭该限制：

# Windows系统
chrome.exe --disable-web-security --user-data-dir="C:/ChromeDevSession"

# Mac系统
open -n -a "Google Chrome" --args --disable-web-security --user-data-dir="/tmp/ChromeDevSession"

用此方式打开Chrome后再访问本地index.html，验证是否为浏览器限制导致的问题。

2. Capacitor安卓环境的跨域配置 #

Capacitor安卓默认允许跨域，但请求外部API时需确认以下配置：

• 检查android/app/src/main/res/xml/network_security_config.xml，添加目标API域名：

  <?xml version="1.0" encoding="utf-8"?>
  <network-security-config>
      <domain-config cleartextTrafficPermitted="true">
          <domain includeSubdomains="true">你的API域名</domain>
      </domain-config>
  </network-security-config>
  

• 确保AndroidManifest.xml的application标签引用该配置：

  <application
      ...
      android:networkSecurityConfig="@xml/network_security_config"
      ...>
  

• 若请求HTTP协议接口，需在application标签添加android:usesCleartextTraffic="true"

三、Capacitor基础配置校验 #

• 确认capacitor.config.ts（或capacitor.config.json）中webDir设置为Vue构建后的目录：

  {
    "webDir": "dist"
  }
  

• 执行npx cap copy android确保静态资源同步到安卓项目，再重新构建安卓应用。

四、调试安卓应用实际错误 #

• 使用Android Studio打开安卓项目，通过Logcat查看详细错误日志
• 或通过Chrome远程调试：
  1. 连接安卓设备/启动模拟器并打开应用
  2. 在Chrome地址栏输入chrome://inspect，找到对应应用点击inspect
  3. 查看控制台具体错误，定位是资源加载失败还是请求跨域问题

内容的提问来源于stack exchange，提问作者Hasban Fardani