版本: v8

实时重载

使用实时重载选项将在您更改开发环境中应用程序代码时重新加载浏览器或 Web视图。这对于使用硬件设备进行开发特别有用。

术语

实时重载是一个混淆的术语。使用 ionic serve，实时重载仅指在进行更改时重新加载浏览器。实时重载也可以与 Capacitor 和 Cordova 一起使用，为虚拟和硬件设备提供相同的体验，这消除了重新部署原生二进制文件的需要。

由于实时重载需要 Web视图从您的计算机上托管的 URL 加载您的应用程序，而不是仅仅读取设备上的文件，因此为硬件设备设置实时重载可能很棘手。

与常规设备部署一样，您将需要一根电缆将您的设备连接到计算机。不同之处在于 Ionic CLI 将 Web视图配置为从计算机上的开发服务器加载您的应用程序。

要将实时重载与 Capacitor 一起使用，请确保您正在使用虚拟设备或与计算机连接到同一 Wi-Fi 网络的硬件设备。然后，您需要使用 --external 标志指定要为开发服务器使用外部 IP 地址。

$ ionic capacitor run ios -l --external
$ ionic capacitor run android -l --external

注意

请记住，使用 --external 选项，您的 Wi-Fi 网络上的其他人将能够访问您的应用程序。

对于 Android 设备，Ionic CLI 将自动转发开发服务器端口。这意味着您可以使用 localhost 地址，它将在 Web视图中加载时引用您的计算机，而不是设备。

以下一体化命令将在 localhost 上启动实时重载服务器，并使用 Cordova 将应用程序部署到 Android 设备

ionic cordova run android -l

对于 iOS 设备，端口转发还不是一个选项。这意味着您需要将您的设备连接到与您的计算机相同的 Wi-Fi 网络，并为开发服务器使用外部地址。

在某些情况下，Ionic CLI 将不知道用来配置 Web视图的地址，因此您可能会被提示选择一个。请务必选择计算机在 Wi-Fi 网络上的地址。

以下一体化命令将在 所有地址 上启动实时重载服务器，并使用 Cordova 将应用程序部署到 iOS 设备

ionic cordova run ios -l --external

注意

请记住，使用 --external 选项，您的 Wi-Fi 网络上的其他人将能够访问您的应用程序。

使用 Cordova 时，使用 --device、--emulator 和 --target 选项来缩小目标设备范围。使用 --list 选项列出所有目标。请参阅命令文档中的用法。
您可以通过使用 ionic serve 和 ionic cordova run 或 ionic capacitor run 的 --livereload-url 选项来分离开发服务器进程和部署进程。
对于 Android，可以配置 adb 以在 adb 服务器运行时始终转发端口（参见 adb reverse）。通过设置端口转发，将不再需要外部地址。您也可以通过 TCP 设置 adb 桥接，这样后续部署不再需要 USB 线缆。
如果您使用的是带有 Angular 的开发容器，您可能会发现实时重载不起作用。要解决此问题，请在 angular.json 中将 projects.app.architect.serve.configurations.development.poll 设置为 1。

实时重载默认情况下将使用 HTTP，这会导致需要安全上下文（如 web 加密）的 Web API 失败。要建立安全上下文，您可以使用 --ssl 参数来使用 HTTPS。

例如，使用 Angular 应用程序，您可以运行以下命令来传递证书和私钥，并使用 HTTPS 提供您的应用程序

ionic capacitor run android --livereload --external --ssl -- --ssl-cert='server.crt' --ssl-key='server.key'