Skip to main content

实时重新加载

¥Live Reload

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

¥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，Live Reload 只是指在发生更改时重新加载浏览器。Live Reload 还可以与 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​

要将 Live Reload 与 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
注意

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

¥Remember, with the --external option, others on your Wi-Fi network will be able to access your app.

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 将应用部署到 Android 设备：

¥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
注意

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

¥Remember, with the --external option, others on your Wi-Fi network will be able to access your app.

提示​

¥Tips

  • 对于 Cordova，使用 --device、--emulator 和 --target 选项来缩小目标设备范围。使用 --list 选项列出所有目标。请参阅 命令文档 中的用法。

    ¥With Cordova, use the --device, --emulator, and --target options to narrow down target devices. Use the --list option to list all targets. See usage in the command docs.

  • 你可以使用 ionic serve 和 ionic cordova run 或 ionic capacitor run 的 --livereload-url 选项将开发服务器进程和部署进程分开。

    ¥You can separate the dev server process and the deploy process by using ionic serve and the --livereload-url option of ionic cordova run or ionic capacitor run.

  • 对于 Android，可以将 adb 配置为在 adb 服务器运行时始终转发端口（请参阅 adb reverse）。设置端口转发后，将不再需要外部地址。你还可以通过 TCP 设置 adb 桥，以便后续部署不再需要 USB 电缆。

    ¥For Android, it is possible to configure adb to always forward ports while the adb server is running (see adb reverse). With port forwarding set up, an external address would no longer be required. You can also setup the adb bridge over TCP such that subsequent deploys no longer need a USB cable.

  • 如果你使用的是带有 Angular 的开发容器，你可能会发现实时重新加载不起作用。要修复此问题，请在 angular.json 中将 projects.app.architect.serve.configurations.development.poll 设置为 1。

    ¥If you are using a development container with Angular, you may see that live reload does not work. To fix it, set projects.app.architect.serve.configurations.development.poll to 1 in angular.json.

使用 SSL​

¥Using SSL

默认情况下，实时重新加载将使用 HTTP，这将导致需要安全上下文（如 网络加密）的 Web API 失败。要建立安全上下文，你可以使用 --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.

目录