Vue-cli: 3.0.0-beta.16 热更新失效

[bigbanana]

Version

3.0.0-beta.15

Reproduction link

https://github.com/vuejs/vue-cli

Steps to reproduce

vue create test
cd test
rm -rf node_modules
npm install
npm run serve

What is expected?

HMR热更新失效

What is actually happening?

HMR socket连接没有问题，但是webpackHotUpdate事件无法触发，导致热更新失效，检查app.js发现 webpack/hot/emitter.js被webpack打包了两个，出现两个不同实例。

---

大致确定目标是@vue/[email protected]导致的，回退版本beta.10后暂时解决。由于时间急，没有继续追踪。

[bigbanana]

抱歉，Version 写错了，是3.0.0-beta.16，模板不能选择beta.16，忘记更正了。

[jkzing]

Can you paste your vue.config.js here ?

[bigbanana]

const fs = require('fs')

module.exports = {
configureWebpack: {
disableHostCheck: true,
proxy: {
'/api': {
target: 'http://localhost:3000',
pathRewrite: {'^/api' : ''}
}
}
},
css: {
loaderOptions: {
sass: {
data: @import "@/variables.scss";
}
}
}
}

[yyx990803]

Need a valid repro.

你项目里是不是存在两个版本的 webpack？

[bigbanana]

我检查过的，没有哦，如果你们无法重现问题，那我明天再仔细分析一下再回复。

[liukuo625341]

我也遇到了这个问题 ,项目刚创建完毕,什么都没有设置,控制台会提示 [WDS] Disconnected!,我把版本改成beta.15就可以正常热更新了

[SunshowerC]

same here

[immissile]

same issue.
@vue/[email protected] worked well.

[LinusBorg]

No reproduction provided after 19 days.

Closing until reproduction is provided.

[bigbanana]

抱歉，好久没关注这个问题，今天仔细分析了一下，是因为使用了cnpm，cnpm使用symlink，导致webpack打包的时候抒符号链接的包打包了两份，由于webpack/hot/emitter.js为两个不同实例，导致webpack hot/server webpackHotUpdate无法触发，热更新失效。
解决方法：设置registry ，不使用cnpm.
npm config set registry https://registry.npm.taobao.org
npm install

[paraself]

Same issue, but is solved with your solution. Thanks!

[psaren]

@bigbanana 谢谢！
遇到同样的问题，这个解决方法work了

[excaliburhan]

There is a resolve.symlinks in webpack configuration, and it's default value is true.
Howerver, project created by vue-cli, the resolve.symlinks is set to false.
For some reason, I have to use npm with symlink, the solution is set resolve.symlinks in vue.config.js
Like this:

module.exports = {
  chainWebpack: config => {
    config.resolve
        .symlinks(true)
    return config
  }
}

[ellakan]

devServer: {
useLocalIp: false,
proxy: 'http://localhost:8080',
public: '192.168.56.2:8080',
}
我加了public的设置，热更新管用的

[ruiyongsheng]

热更新HTML和JS能正常生效，但是css，改动了之后，并没生效，必须手动刷新浏览器才行，这个求解？

[z1shiki]

@ruiyongsheng
可能在vue.config.js中配置了
css:{ extract: true, //需要热更新此处设置成false }