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模块

[haoqunjiang]

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启动没有警告

[haoqunjiang]

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.