使用命令 cordova serve 时如何添加 Live Reload？答案

【问题标题】：How to add Live Reload when using the command cordova serve?使用命令 cordova serve 时如何添加 Live Reload？
【发布时间】：2015-05-08 15:46:16
【问题描述】：

我正在使用此命令在浏览器中打开我的应用程序：cordova serve，但当我更新我的代码时它不会自行刷新。我该怎么做？

我尝试使用 phonegap serve 代替它，它具有实时重新加载功能，但它不断向我发送警报并使我的浏览器崩溃。

所以，如果你能告诉我如何解决这两个问题中的任何一个，那将是很棒的。

【问题讨论】：

确保它是从 Www 文件夹执行的

标签： cordova phonegap-plugins

【解决方案1】：

你可以试试Cordova Browsersync plugin。使用插件的说明在plugin's repo。

使用cordova plugin add cordova-plugin-browsersync 添加此插件后，您只需使用cordova run -- --live-reload 即可开始实时重新加载。请注意，如果您有多个设备，这也会启用同步滚动和点击。

【讨论】：

这个插件已经过时并且破坏了我的应用程序。有其他选择吗？
也在寻找替代品
stackoverflow.com/a/50786052/943646 看到我的答案，我成功地使用我的科尔多瓦应用程序的实时重新加载功能。
这个插件对我有效，我还需要添加cordova平台浏览器:)命令是-cordova平台添加浏览器-.
可以在安卓设备上使用livereload吗？每次我做出改变时我都需要做cordova run android。

【解决方案2】：

最简单的解决方案就是使用phonegap serve 而不是cordova serve。只要您安装了phonegap，即使您仅使用cordova 构建了应用程序，它也可以工作。

phonegap serve 为您提供一个实时重新加载的 IP 地址，您可以从浏览器或 phonegap 开发人员应用程序访问该地址。两者都非常方便并且实际工作，这总是一个优点。

【讨论】：

Cordova 浏览器插件安装失败。我发现这是npm install -g phonegap 最简单的解决方案
这是 2019 年迄今为止最好的解决方案，因为不再维护和归档 browsersync
但是在 2020 年，Phonegap 将被 Adobe 搁置。

【解决方案3】：

如果您使用phonegap serve 并且看到 JavaScript 提示，则需要添加一个 sn-p 以防止应用加载本机级别的 JavaScript 代码。

替换<script type="text/javascript" src="phonegap.js"></script> 与

<script type="text/javascript">
    if (!navigator.userAgent.toLowerCase().match('chrome')) {
        document.write("<script src='phonegap.js'><\/script>");
    }
</script>

请注意，这适用于 cordova.js 和 phonegap.js（它们应该是同一个文件）

【讨论】：

【解决方案4】：

你也可以试试cordova-plugin-browsersync-gen2。它基于旧的废弃插件，与最新版本的 npm 和 Cordova 完全兼容。

此外，此版本还为以下内容添加了缺少的实时重载支持：

cordova run (for each platform individually)
cordova serve

【讨论】：

此插件刷新页面大约需要一分钟。

【解决方案5】：

您可以直接使用浏览器同步，无需使用cordova 插件。请按照以下步骤操作

npm install -g browser-sync
将platform/android/platform_www的内容复制到www
在 config.xml 中添加以下内容：<allow-navigation href="http://<YOUR-IP>:3000" />
将base-href（如果是角度项目）设置为http://<YOUR-IP>:3000/index.html
在 www 中运行 browser-sync -w -server
更新内容安全策略以执行来自 YOUR-IP:3000 的 JS 和资产。还允许 webscokets (ws) 用于浏览器同步
使用 cordova run android 部署应用程序

请注意，每次添加新插件时，您都必须重新部署应用程序，并使用新的 platform_www 内容更新 www 文件夹。

每次更新 www，browser-sync 都会自动通知你的 webview，并刷新相同。如果您必须重新启动应用程序并且与浏览器同步的连接丢失，请将设备连接到计算机并使用 chrome 设备检查器刷新应用程序，浏览器同步将再次生效。

【讨论】：

【解决方案6】：

cordova-plugin-browsersync 可能已过时。或者，您可以使用 watch 命令，例如：

npm install watch --save-dev
转到 package.json 文件下的 scripts 行，然后添加：

"dev": "观看 'cordova 运行浏览器' www"
npm 运行开发

当您更改 www 文件夹下的任何内容时，它会自动刷新页面。

示例截图：

【讨论】：

它不会刷新页面，而是重新运行cordova run browser，并在每次更改不同选项卡后使用不同的端口。即每次更改都会打开一个新端口和一个新选项卡。