如何在安卓、iOS设备上运行带live reload的Ionic/Capacitor应用？

前置条件 #

• 已配置完整安卓开发环境：包含Android Studio、对应版本Android SDK，ANDROID_HOME环境变量配置正确
• 安卓实体设备已开启开发者模式、USB调试权限，通过USB连接Windows设备后，执行adb devices可正常识别到设备
• Ionic项目依赖已全部安装完成，本地执行ionic serve可正常启动项目

操作步骤 #

1. 获取Windows主机局域网IP #

打开CMD或PowerShell终端，执行ipconfig，找到当前使用的网络（需保证安卓设备和Windows主机连接同一局域网）对应的IPv4地址，记录备用，示例格式如192.168.1.105。

2. 启动支持局域网访问的Ionic开发服务 #

在项目根目录执行命令：

ionic serve --host=0.0.0.0 --port=8100 --no-open

参数说明：--host=0.0.0.0允许局域网内其他设备访问本地开发服务，端口可根据自身情况调整，确保未被其他程序占用即可。

3. 配置Capacitor热重载地址 #

打开项目根目录下的配置文件，TS项目为capacitor.config.ts，JS项目为capacitor.config.json，新增server配置项：

// capacitor.config.ts示例
import { CapacitorConfig } from '@capacitor/cli';

const config: CapacitorConfig = {
  // 保留原有项目配置不变
  server: {
    url: 'http://刚才记录的局域网IP:8100',
    cleartext: true // 允许加载HTTP资源，本地开发服务默认走HTTP协议
  }
};

export default config;

注意：后续打包生产版本APK时，务必删除该server配置项，否则生产版本会尝试访问本地开发地址，无法正常加载资源。

4. 同步配置到安卓项目 #

执行命令同步配置：

npx cap sync android

5. 运行到实体安卓设备 #

执行命令：

npx cap run android

执行后在弹出的设备选择列表中选中你连接的实体安卓设备即可，启动成功后修改项目前端代码，APP会自动刷新实现热重载。

常见问题排查 #

• 启动APP后提示无法连接服务：先检查Windows防火墙是否放行了8100端口，可临时关闭防火墙测试；确认安卓设备和Windows主机连接的是同一个局域网，不存在网络隔离。
• 修改代码后APP不自动刷新：检查ionic serve服务是否正常运行，确认配置文件中的IP、端口和开发服务的地址完全一致。
• 执行npx cap run android找不到设备：重新插拔USB线，确认设备的USB调试权限已开启，重新执行adb devices确认设备可被识别。

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