Vue-cli: Hot Reload Not Working

[chenweibo]

Version

3.2.1

Reproduction link

https://github.com/chenweibo/vueCliDemo

Environment info

  System:
    OS: macOS 10.14.2
    CPU: (12) x64 Intel(R) Core(TM) i7-8850H CPU @ 2.60GHz
  Binaries:
    Node: 10.14.2 - /usr/local/bin/node
    Yarn: 1.12.3 - /usr/local/bin/yarn
    npm: 6.4.1 - /usr/local/bin/npm
  Browsers:
    Chrome: 71.0.3578.98
    Firefox: 64.0
    Safari: 12.0.2
  npmPackages:
    @vue/babel-preset-app:  3.2.0
    @vue/cli-overlay:  3.2.0
    @vue/cli-plugin-babel: ^3.2.0 => 3.2.0
    @vue/cli-plugin-eslint: ^3.2.0 => 3.2.1
    @vue/cli-service: ^3.2.0 => 3.2.0
    @vue/cli-shared-utils:  3.2.0
    @vue/component-compiler-utils:  2.3.1
    @vue/preload-webpack-plugin:  1.1.0
    @vue/web-component-wrapper:  1.2.0
    babel-helper-vue-jsx-merge-props:  2.0.3
    babel-plugin-transform-vue-jsx:  4.0.1
    eslint-plugin-vue: ^5.0.0-0 => 5.0.0
    vue: ^2.5.17 => 2.5.21
    vue-eslint-parser:  2.0.3
    vue-hot-reload-api:  2.3.1
    vue-loader:  15.4.2
    vue-style-loader:  4.1.2
    vue-template-compiler: ^2.5.17 => 2.5.21
    vue-template-es2015-compiler:  1.6.0
  npmGlobalPackages:
    @vue/cli: 3.2.1

Steps to reproduce

使用npm 安装的vue-cli 正常选择默认模板生成 然后 启动服务 热更新已经默认不生生效了 重现的模板在github 地址

What is expected?

希望正常能热更新 安装过很多版本的node.js 版本 都是不行 包括文档推荐的node.js 版本

What is actually happening?

不能热更新

---

WAIT Compiling...6:11:27 PM

10% building 0/1 modules 1 active ...dex.js??ref--13-0!/web/demo/src/App.vue DONE Compiled successfully in 408ms6:11:28PM

WARN
Couldn't parse bundle asset "/web/demo/dist/app.9f3062b5c30ee5b7e896.hot-update.js".
Analyzer will use module sizes from stats file.

App running at:

• Local: http://localhost:8081/
• Network: http://192.168.1.7:8081/

控制台没报错。 但是VUE UI 这个报错。 直接提示这个热更新问题不行

[chenweibo]

vue-cli 是通过 npm 安装。 没安装cnpm模块

[sodatea]

Caused by webpack-dev-server 3.1.11.

---

Workaround 1:

// vue.config.js
module.exports = {
  devServer: {
    disableHostCheck: true
  }
}

---

Workaround 2:

If you are using yarn, you can lock its version by adding the following resolutions field to package.json.
如果用 yarn 的话，暂时可以在 package.json 里增加 resolutions 字段锁版本

"resolutions": {
  "webpack-dev-server": "3.1.10"
}

[chenweibo]

是的 我测试了下老的项目 webpack-dev-server 3.0.rc.12 发现热更新 生效的 这是我再开发新项目 重新生成模板的时候遇到的。

[liuhuaxia]

// vue.config.js
module.exports = {
devServer: {
disableHostCheck: true
}
}
这样设置是可以修复，但是vue ui启动控制台还是有警告，用npm启动没有警告

[sodatea]

Should have been fixed with the latest release of webpack-dev-server v3.1.14

Please run rm -rf node_modules yarn.lock package-lock.json and reinstall the dependencies.

[marcnewton]

Still having to downgrade to 3.1.10 even after clean install of everything and wiped cache.

[popcornkiller1088]

True, v3.1.14 is still no working at all.
I using npm-force-resolutions to solve this problem

[marszoolong]

[email protected], 热更新动作会发生，但没有实质效果，一个更改在后续更改触发的热更新里才能起效果。

[kanbekotori]

True, v3.1.14 is still no working at all.
I using npm-force-resolutions to solve this problem

Hello, how do you solve the problem? I put

"resolutions": {
    "webpack-dev-server": "3.1.10"
  }

in package.json file and follow this doc run

rm -r node_modules
npx npm-force-resolutions
npm install

But i still get 3.1.14 version.

$ npm ls webpack-dev-server
[email protected] /Users/jiangxingshang/Documents/workspace/WebStorm/final-shop
└─┬ @vue/[email protected]
  └── [email protected] 

[marcnewton]

npm install [email protected] to install specific version.

[marcnewton]

I just ran npm install -g @vue/cli - that installed version 3.4.1 (again)
Then ran npm install [email protected]

Everything is working as expected now.
I don't understand why this worked all of a sudden when a clean install previously installed the same versions. Perhaps a sub dependency has been updated in the last week... ?

[kanbekotori]

I update @vue/cli to version 3.4.1 still not work.

└─┬ @vue/[email protected]
  └── [email protected] 

Couldn't parse bundle asset "/Users/jiangxingshang/Documents/workspace/WebStorm/final-shop/dist/app.bda800bdbb3808612f08.hot-update.js".
Analyzer will use module sizes from stats file.

[marszoolong]

hot reload not working in keep-alive

Caused by webpack-dev-server 3.1.11.

Workaround 1:

// vue.config.js
module.exports = {
  devServer: {
    disableHostCheck: true
  }
}

Workaround 2:

If you are using yarn, you can lock its version by adding the following resolutions field to package.json.
如果用 yarn 的话，暂时可以在 package.json 里增加 resolutions 字段锁版本

"resolutions": {
  "webpack-dev-server": "3.1.10"
}

Workaround 1 is working.
BUT when the \

[kanbekotori]

I am not using keep-alive tag and in vue.config.js also has

devServer: {
    disableHostCheck: true
}

still not work for me.
I try to use yarn to install with

"resolutions": {
  "webpack-dev-server": "3.1.10"
}

Also not work. Crazy...

[marszoolong]

I am not using keep-alive tag and in vue.config.js also has

devServer: {
    disableHostCheck: true
}

still not work for me.
I try to use yarn to install with

"resolutions": {
  "webpack-dev-server": "3.1.10"
}

Also not work. Crazy...

my success case:
1- remove \ 2- add disableHostCheck to devServer (must to do)
3- use default versoin (3.1.14) of webpack-dev-server

[zhoupeihuang]

devServer: {
// 热更新 打开
hotOnly: true,

[WangXi01]

devServer: {
// 热更新 打开
hotOnly: true,

现在好像不需要了，我的是关闭的也可以热更新

[aiyuchen]

没用啊

[natedunn]

Doesn't seem to be related directly to Vue?

I don't see gzip or parsed sizes, it only shows stat size