Vue-CLI v3 应用程序：热模块重新加载不起作用答案

【问题标题】：Vue-CLI v3 app: hot module reload not workingVue-CLI v3 应用程序：热模块重新加载不起作用
【发布时间】：2019-02-08 00:01:09
【问题描述】：

我已经安装了 Vue CLI v3，并且在我的终端中：

使用“vue create my-project”创建了一个新应用（接受默认配置）
导航到“my-project”应用目录，运行“npm run serve”，结果为：

DONE Compiled successfully in 11889ms

App running at:
- Local: http://localhost:8080/
- Network: http://192.168.0.3:8080/

Note that the development build is not optimized. To create a production build, run npm run build.

... 然后，当对 Hello World 组件进行任何更改时，例如，对 css 进行调整，像链接颜色这样明显的东西，什么都没有发生；终端无响应，浏览器无刷新，手动刷新时页面无更新。

我过去使用 Vue 构建了一些应用程序，热模块重新加载以前可以工作，但现在无论我在任何项目文件中更改什么，终端中的活动/响应都是零；只有当我关闭终端选项卡、重新打开选项卡、导航到项目目录并重新运行“npm run serve”并刷新浏览器时，我才能看到更改。显然这是不可用的。我错过了什么？

【问题讨论】：

你的环境是什么？（平台？以及 node、npm、vue-cli 和浏览器的版本？）任何控制台日志？
似乎没有，您在问题中描述的内容做错了什么。您需要调试和/或提供更多信息。我会尝试重新安装 npm/yarn，重新安装所有 npm/yarn 模块和vue-cli。您是否卸载了可能以前的vue-cli 安装？也许尝试在不同的端口上运行它。并检查您的防火墙配置，是否有任何被阻止等。
@tony19 谢谢你的帮助（请原谅我迟到的回复） OS X Yosemite node v10.8.0 npm v6.2.0 vue v3.0.1 Chrome v68 ... 不，因为什么都没有文件更改时在我的控制台中发生，我没有错误日志。是的，根据 vue-cli v3 上的文档，我确实卸载了以前的 vue-cli 并且必须更新节点。没有更改防火墙，没有任何相关的阻止。如果这对你们中的任何一个都没有任何建议，那么我想我可以尝试重新安装所有这些。
@ssc-hrep3 谢谢你的帮助（请原谅我迟到的回复） OS X Yosemite node v10.8.0 npm v6.2.0 vue v3.0.1 Chrome v68 ... 不，因为什么都没有文件更改时完全发生在我的控制台中，我没有错误日志。是的，根据 vue-cli v3 上的文档，我确实卸载了以前的 vue-cli 并且必须更新节点。没有更改防火墙，没有任何相关的阻止。如果这对你们中的任何一个都没有任何建议，那么我想我可以尝试重新安装所有这些
您是否有任何扩展阻止热模块更新？尝试在禁用所有扩展程序的情况下打开 Chrome。您可以通过以下方式做到这一点：(1) 关闭所有 Chrome 实例，(2) 运行 /Applications/Google\ Chrome.app/Contents/MacOS/Google\ Chrome --disable-extensions --bwsi --incognito

标签： vue.js vue-cli vue-cli-3

【解决方案1】：

此问题已解决，但我不能 100% 确定是什么原因造成的。

我注意到一些热重载失败的人提到了错误的目录名称。我的 vue 项目的父目录名称是合法的，但我曾一度重命名它（尽管这是多次重新启动和重新安装之前），而且我还注意到一些 vue-cli 创建的项目文件夹直到它才显示在 Finder 中已退出并重新启动。我认为该文件夹已损坏。我创建了一个新文件夹 - 可疑文件夹的同级文件夹 - 并使用 vue-cli 进行了另一个操作，它按预期工作。

希望这对某人有所帮助。再次感谢提出建议的各位。

威士忌酒。

【讨论】：

【解决方案2】：

如果你将 Node js 安装为 sudo，那么运行 sudo npm run serve 对我有用。实际上node.js 安装为sudo 并且项目也创建为sudo 所以当我运行npm run serve 时vue-hot-reload-api 无法访问节点服务器进行热重载

此外，如果您希望热重载在离线模式下工作，请关闭您的网络，然后关闭npm run serve，然后重新连接到您的网络。这将作为 localhost 协议工作，而不使用您的本地网络 IP。干杯

【讨论】：

感谢您发布此 Jose。我不是专家，但我的理解是，在通过 npm 或其他包管理器安装时，通常最好避免使用 sudo，但某些开发人员可能需要它。无论如何，我希望您的帖子对其他人有所帮助，并感谢您的提示：离线模式。干杯！
为什么投票给我？任何违反 Stackoverflow 的原因？请解释！

【解决方案3】：

将以下脚本标签添加到 package.json 文件中

...
  "scripts": {
    "dev": "cross-env NODE_ENV=development vue-cli-service serve --open --host localhost",
     ....
  },
....

并运行

npm install –save-dev cross-env

npm run dev

来源：https://www.davidyardy.com/blog/vue-cli-creating-a-project%E2%80%93issue-with-hot-reload/

【讨论】：

【解决方案4】：

适用于使用 WSL 的任何人。我遇到了这个确切的问题并通过这种方法解决了它。

我有同样的问题，似乎 wsl2 不监视文件更改在windows文件系统里面。如果 vue 一切正常项目位于 Ubuntu 文件系统中。查看此链接以获取更多信息 https://docs.microsoft.com/en-us/windows/wsl/wsl2-ux-changes.

来源：https://github.com/vuejs/vue-cli/issues/4421#issuecomment-557194129

【讨论】：