Vue CLI 项目在 yarn -> npm 切换后不会热重载。也没有配置文件？

Posted 2023-02-22

【中文标题】Vue CLI 项目在 yarn -> npm 切换后不会热重载。也没有配置文件？

【英文标题】：Vue CLI Project doesnt Hot Reload after yarn -> npm switch. No config files either?

【发布时间】：2019-07-02 22:51:03

【问题描述】：

由于客户/同事希望我必须切换到 npm。该项目是使用 Vue CLI 和 Yarn 作为默认包管理器创建的。

我一开始以为没什么大不了的，所以我删除了 node_modules 文件夹和 yarn.lock 文件。然后我运行npm install，然后运行npm run serve。

它可以正常工作和编译，当我更改文件时重新编译，到目前为止一切都很好，但这是奇怪的部分：更改不会反映在浏览器中。我必须手动刷新页面。

我试图查看 vue 或 webpack 的配置文件。但是没有。没有 Webpack 配置，没有 vue cli 配置，没有构建文件夹。

我拥有的是： - .eslintrc.js - .browserlistrc - babel.config.js - postcss.config.js

我不知道还要寻找什么？有人知道这可能是什么吗？

非常感谢， -J

【问题讨论】：

你的package.json 中是否有react-scripts 作为依赖项，或者任何其他捆绑“简化器”？

不，我的 package.json 中没有反应依赖项，我自己没有添加任何 devDependencies。

【参考方案1】：

我的情况是什么原因（我有 Linux 操作系统）：

好像值：max_user_watches 在/proc/sys/fs/inotify/max_user_watches 正在影响 webpack => 这会干扰热重载。

检查你的实际价值

$cat /proc/sys/fs/inotify/max_user_watches
16384

16384 在我的情况下仍然不够。 所以你也需要增加你的价值。

如果您有 Linux 操作系统，解决方案：

创建文件：

sudo nano /etc/sysctl.d/90-override.conf

并用以下内容填充它：

fs.inotify.max_user_watches=200000

看来200000对我来说已经足够了，如果你愿意，可以有更高的价值。

创建文件并添加值后，只需重新启动 PC 就可以了。

【参考方案2】：

Vue CLI 依赖于@vue/cli-service，其行为与 Facebook 的 Create React 应用 (react-scripts) 完全相同。

如果你熟悉 create-react-app，@vue/cli-service 大致是 相当于 react-scripts，虽然功能集是 不同。

https://cli.vuejs.org/guide/#cli-service

所以他们俩所做的就是通过将所有捆绑配置（例如webpack.config.js）隐藏在地​​毯下，为您“简化”项目配置。在大多数情况下这很方便，除非您决定做一些花哨的事情（例如切换包管理器）。在 Create React App 中，可以通过运行 yarn eject 或 npm run eject 来摆脱这种行为，但在 Vue CLI 平台上，您会被锁定。因此，没有直接的方法可以让所有底层配置文件出现并修复其中的错误位他们。

要继续吗？..

【讨论】：

对不起。不想变得粗鲁，但这与我想做的事情有什么关系？你读过我的问题吗？

Ehm... 写了一个有意义的占位符，同时寻找真正的答案。但这是真的。

在我看来，当使用 npm 时，我会提交 package-lock.json 而不是 yarn.lock - 那么为什么要提交而不是删除呢？对我没有意义。和热重载无关。该项目就像一个魅力，只是在没有热重载的情况下开发是非常烦人的。感谢您的帮助。

它们不等效（至少它们不是）yarn.lock 具有较少“容易出错”的格式。

感谢您的编辑。我尝试使用 Vue CLI 和 npm 作为默认包管理器创建一个新项目，然后复制所有 src 文件并将依赖项手动添加到 package.json。没有运气同样的结果，没有热重载:(