vue-cli: Hot Reload Not Working

Version

3.2.1

Reproduction link

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 这个报错。直接提示这个热更新问题不行

About this issue

Original URL
State: closed
Created 6 years ago
Comments: 19 (2 by maintainers)

Most upvoted comments

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"
}

+10

sodatea on Dec 24, 2018

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
final-shop@0.1.0 /Users/jiangxingshang/Documents/workspace/WebStorm/final-shop
└─┬ @vue/cli-service@3.4.0
  └── webpack-dev-server@3.1.14

kanbekotori on Feb 27, 2019

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

liuhuaxia on Dec 24, 2018

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

marcnewton on Feb 18, 2019

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.

sodatea on Dec 25, 2018