Vue-cli: VUE 更新至最新版本（3.4.1），使用VUEcli创建的项目，无法热更新！

[zlzgit]

Version

3.4.1

Environment info

Environment Info:

  System:
    OS: Windows 10
    CPU: (4) x64 Intel(R) Core(TM) i5-7200U CPU @ 2.50GHz
  Binaries:
    Node: 10.6.0 - C:\Program Files\nodejs\node.EXE
    Yarn: Not Found
    npm: 6.1.0 - C:\Program Files\nodejs\npm.CMD
  Browsers:
    Edge: 42.17134.1.0
  npmPackages:
    @vue/babel-helper-vue-jsx-merge-props:  1.0.0-beta.2
    @vue/babel-plugin-transform-vue-jsx:  1.0.0-beta.2
    @vue/babel-preset-app:  3.4.0
    @vue/babel-preset-jsx:  1.0.0-beta.2
    @vue/babel-sugar-functional-vue:  1.0.0-beta.2
    @vue/babel-sugar-inject-h:  1.0.0-beta.2
    @vue/babel-sugar-v-model:  1.0.0-beta.2
    @vue/babel-sugar-v-on:  1.0.0-beta.2
    @vue/cli-overlay:  3.4.0
    @vue/cli-plugin-babel: ^3.4.0 => 3.4.0
    @vue/cli-plugin-eslint: ^3.4.0 => 3.4.0
    @vue/cli-plugin-unit-mocha: ^3.4.0 => 3.4.0
    @vue/cli-service: ^3.4.0 => 3.4.0
    @vue/cli-shared-utils:  3.4.0
    @vue/component-compiler-utils:  2.5.2
    @vue/eslint-config-prettier: ^4.0.1 => 4.0.1
    @vue/preload-webpack-plugin:  1.1.0
    @vue/test-utils: ^1.0.0-beta.20 => 1.0.0-beta.29
    @vue/web-component-wrapper:  1.2.0
    eslint-plugin-vue: ^5.0.0 => 5.1.0
    vue: ^2.5.22 => 2.6.6
    vue-eslint-parser:  2.0.3
    vue-hot-reload-api:  2.3.2
    vue-loader:  15.6.2
    vue-router: ^3.0.1 => 3.0.2
    vue-style-loader:  4.1.2
    vue-template-compiler: ^2.5.21 => 2.6.6
    vue-template-es2015-compiler:  1.8.2
    vuex: ^3.0.1 => 3.1.0
  npmGlobalPackages:
    @vue/cli: Not Found

Steps to reproduce

之前创建的项目都可以热更新，但是升级版本之后，不能热更新，只能通过点击浏览器刷新达到更新的目的！

What is expected?

如何解决热更新问题

What is actually happening?

如何解决热更新问题

---

之前创建的项目都可以热更新，但是升级版本之后，不能热更新，只能通过点击浏览器刷新达到更新的目的！

[sodatea]

请提供复现代码。我本地无法重现你说的问题。

[andynoir]

@zlzgit

Try to do it with yarn. For me it was

npm i -g yarn install yarn

yarn to install packages

yarn serve to run the server

cancel the process

npm run serve run standard npm script

[nan1010082085]

根据楼上的方法 我在style scoped中修改 css 热更新 是好用的， 在man.js 中的less文件 只有启动后的第一次修改会被热更新

[yuyixxy]

我将vue-cli更新到最新版也出现了这种问题，后来发现我的热更新失效是webpack版本的问题，@vue中的一些包限制了webpack的版本，如下："webpack": ">=4 < 4.29"，但是有其他依赖安装了最新版的webpack，导致热更新失效，最后统一webpack版本就可以热更新了。

@sodatea 为什么要限制webpack的版本？我看了下提交记录，是最近几个版本才添加限制的。

[sodatea]

@yuyixxy 因为 webpack 4.29+ 有一个比较严重的 bug https://github.com/webpack/webpack/issues/8656

[fireswork]

+1，我也遇到这个问题了，修改css热更新失效

[sodatea]

请遇到这个问题的各位提供一下复现代码……不然我们无法定位问题。

[fireswork]

@sodatea 就是cli自己生成的初始代码，改样式或者改html热更新也没有效果。自定义配置: babel + router + vuex + eslint + prettier + stylus

[CatMLily]

在本地开发环境，单文件组件中，style标签下，写less，热更新在配置vue.config.js之后是有效的。
在style下引入公用的less文件后，热更新无效。
vue.config.js的配置如下，根据官方文档改了配置
module.exports = { css: { extract: false, } }
某个单文件组件的引用如下
<style lang="less" scoped>
@import "../common/less/common.less";
.home {
width: 1920vw*@vw-ratio;
height: 1044vw*@vw-ratio;
}
</style>
公用common.less 文件部分如下
@vw-ratio: 100/1920;

已经解决了，本地开了代理的原因。和框架本身无关。

[wangkangzhen]

在本地开发环境，单文件组件中，style标签下，写less，热更新在配置vue.config.js之后是有效的。
在style下引入公用的less文件后，热更新无效。
vue.config.js的配置如下，根据官方文档改了配置
module.exports = { css: { extract: false, } }
某个单文件组件的引用如下
<style lang="less" scoped>
@import "../common/less/common.less";
.home {
width: 1920vw*@vw-ratio;
height: 1044vw*@vw-ratio;
}
</style>
公用common.less 文件部分如下
@vw-ratio: 100/1920;

已经解决了，本地开了代理的原因。和框架本身无关。

遇到了这个问题，感谢提供参考帮助。

[vue-bot]

Hello!
This issue has gone quiet. Spooky quiet. 👻

We get a lot of issues, so we currently close issues requiring feedback after 20 days of inactivity. It’s been at least 10 days since the last update here. If we missed this issue or if you want to keep it open, please reply here. (A maintainer can also add the label not stale to keep this issue open.)

Thanks for being a part of the Vue community! 💪💚️

[PhotonAlpha]

我下载最新的code也遇到了这个问题，我用的Ubuntu18 系统，我出现这种情况是因为用vscode 开发，排查各种情况之后无意间发现vscode出现一个提示。Visual Studio Code is unable to watch for file changes in this large workspace

上述内容的大意是指，目前文件监控的实际数目已超出当前设置值，因此无法通知热更新。

1. 检查现有文件监控数目

cat /proc/sys/fs/inotify/max_user_watches
我的机器显示是 8192

2. 修改文件监控数目

综合考虑实际需监控文件的数目和内存消耗情况，我将新的文件监控数目设置为：81920，即原来监控数目的10倍
sudo vi /etc/sysctl.conf
在该配置文件的最后一行加上下述语句：
fs.inotify.max_user_watches=81920

3. 让配置文件中的新文件监控数目生效

sudo sysctl -p
result
fs.inotify.max_user_watches = 81920

4. reopen VSCode

[vue-bot]

Hello!
This issue has gone quiet. Spooky quiet. 👻

We get a lot of issues, so we currently close issues requiring feedback after 20 days of inactivity. It’s been at least 10 days since the last update here. If we missed this issue or if you want to keep it open, please reply here. (A maintainer can also add the label not stale to keep this issue open.)

Thanks for being a part of the Vue community! 💪💚️

[vue-bot]

Hey again! 😸️

It’s been 20 days since anything happened on this issue, so our friendly neighborhood robot (that’s me!) is going to close it.
Please keep in mind that I’m only a robot, so if I’ve closed this issue in error, I’m HUMAN_EMOTION_SORRY. 🤖 Please feel free to reopen this issue or create a new one if you need anything else.

Thanks again for being part of the Vue community! 💚️