实时重新加载

🌐 Live Reload

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

🌐 Using the Live Reload option will reload the browser or Web View when you change your app's code in your development environment. This is particularly useful for developing using hardware devices.

条款

🌐 Terms

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

🌐 Live Reload is a conflated term. With ionic serve, Live Reload just refers to reloading the browser when changes are made. Live Reload can also be used with Capacitor and Cordova to provide the same experience on virtual and hardware devices, which eliminates the need for re-deploying a native binary.

用法

🌐 Usage

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

🌐 Since Live Reload requires the Web View to load your app from a URL hosted by your computer instead of just reading files on the device, setting up live-reload for hardware devices can be tricky.

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

🌐 As with regular device deploys, you will need a cable to connect your device to your computer. The difference is the Ionic CLI configures the Web View to load your app from the dev server on your computer.

Capacitor

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

🌐 To use Live Reload with Capacitor, make sure you're either using a virtual device or a hardware device connected to the same Wi-Fi network as your computer. Then, you'll need to specify that you want to use an external IP address for the dev server using the --external flag.

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

note

请记住，启用 --external 选项后，你 Wi-Fi 网络上的其他人将能够访问你的应用。

Cordova

安卓

🌐 Android

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

🌐 For Android devices, the Ionic CLI will automatically forward the dev server port. This means you can use a localhost address and it will refer to your computer when loaded in the Web View, not the device.

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

🌐 The following all-in-one command will start a live-reload server on localhost and deploy the app to an Android device using Cordova:

ionic cordova run android -l

iOS

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

🌐 For iOS devices, port forwarding is not yet an option. This means you'll need to connect your device to the same Wi-Fi network as your computer and use an external address for the dev server.

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

🌐 In some cases, the Ionic CLI won't know the address with which to configure the Web View, so you may be prompted to select one. Be sure to select the address of your computer on your Wi-Fi network.

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

🌐 The following all-in-one command will start a live-reload server on all addresses and deploy the app to an iOS device using Cordova:

ionic cordova run ios -l --external

note

请记住，启用 --external 选项后，你 Wi-Fi 网络上的其他人将能够访问你的应用。

提示

🌐 Tips

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

使用 SSL

🌐 Using SSL

实时重载默认将使用 HTTP，这将导致需要安全上下文的 Web API（例如 web crypto）无法使用。要建立安全上下文，你可以使用 --ssl 参数来使用 HTTPS。

🌐 Live reload will use HTTP by default which will cause web APIs that require a secure context (like web crypto) to fail. To establish a secure context you can use the --ssl argument to use HTTPS.

例如，对于 Angular 应用，你可以运行以下命令来传递证书和私钥并通过 HTTPS 为你的应用提供服务：

🌐 For example, with an Angular application you can run the following to pass a certificate and private key and serve your app with HTTPS:

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

使用自签名证书并确保设备信任它是一个复杂的话题，已在这篇文章中讨论。

🌐 Using a self signed certificate and ensuring it is trusted by the device is a complicated topic and is covered in this article.