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

Question

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

使用 'vue create my-project' 创建了一个新应用（接受默认配置）
导航到'my-project'app目录和运行'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 进行调整时，link 颜色之类的东西很明显，没有任何反应；终端无响应，浏览器无刷新，手动刷新时页面无更新。

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

Answer 1

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

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

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

威士忌 T.

Answer 2

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

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

Answer 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/

Answer 4

对于所有使用 WSL 的人。我运行进入了这个确切的问题并通过这种方法解决了它。

I had the same issue, It seems wsl2 does not watch for file changes inside the windows filesystem. Everything works fine if the vue project is inside the Ubuntu filesystem. Check out this link for further info https://docs.microsoft.com/en-us/windows/wsl/wsl2-ux-changes.

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

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

Vue-CLI v3 app: hot module reload not working

vue.js

vue-cli

vue-cli-3