Vue3.0 @vue/cli 4.5.11

CLI (@vue/cli) 是一个全局安装的 npm 包，提供了终端里的 vue 命令。它可以通过 vue create 快速搭建一个新项目，或者直接通过 vue serve 构建新想法的原型。你也可以通过 vue ui 通过一套图形化界面管理你的所有项目。

1、初始化完项目运行热更新报错如下：

sockjs.js?9be2:1609 GET http://192.168.0.103:8080/sockjs-node/info?t=1615888886886 net::ERR_NETWORK_CHANGED
AbstractXHRObject._start @ sockjs.js?9be2:1609
eval @ sockjs.js?9be2:1498
setTimeout (async)
AbstractXHRObject @ sockjs.js?9be2:1497
XHRCorsObject @ sockjs.js?9be2:2875
InfoAjax @ sockjs.js?9be2:356
InfoReceiver._getReceiver @ sockjs.js?9be2:539
InfoReceiver.doXhr @ sockjs.js?9be2:556
eval @ sockjs.js?9be2:525
setTimeout (async)
InfoReceiver @ sockjs.js?9be2:524
SockJS @ sockjs.js?9be2:734
SockJSClient @ SockJSClient.js?0a33:43
initSocket @ socket.js?e29c:20
eval @ socket.js?e29c:39
setTimeout (async)
eval @ socket.js?e29c:38
EventTarget.dispatchEvent @ sockjs.js?9be2:170
eval @ sockjs.js?9be2:973
setTimeout (async)
SockJS._close @ sockjs.js?9be2:961
SockJS._receiveInfo @ sockjs.js?9be2:790
g @ sockjs.js?9be2:66
EventEmitter.emit @ sockjs.js?9be2:86
eval @ sockjs.js?9be2:561
setTimeout (async)
InfoReceiver.doXhr @ sockjs.js?9be2:558
eval @ sockjs.js?9be2:525
setTimeout (async)
InfoReceiver @ sockjs.js?9be2:524
SockJS @ sockjs.js?9be2:734
SockJSClient @ SockJSClient.js?0a33:43
initSocket @ socket.js?e29c:20
eval @ socket.js?e29c:39
setTimeout (async)
eval @ socket.js?e29c:38
EventTarget.dispatchEvent @ sockjs.js?9be2:170
eval @ sockjs.js?9be2:973
setTimeout (async)
SockJS._close @ sockjs.js?9be2:961
SockJS._receiveInfo @ sockjs.js?9be2:790
g @ sockjs.js?9be2:66
EventEmitter.emit @ sockjs.js?9be2:86
eval @ sockjs.js?9be2:561
setTimeout (async)
InfoReceiver.doXhr @ sockjs.js?9be2:558
eval @ sockjs.js?9be2:525
setTimeout (async)
InfoReceiver @ sockjs.js?9be2:524
SockJS @ sockjs.js?9be2:734
SockJSClient @ SockJSClient.js?0a33:43
initSocket @ socket.js?e29c:20
eval @ socket.js?e29c:39
setTimeout (async)
eval @ socket.js?e29c:38
EventTarget.dispatchEvent @ sockjs.js?9be2:170
eval @ sockjs.js?9be2:973
setTimeout (async)
SockJS._close @ sockjs.js?9be2:961
SockJS._receiveInfo @ sockjs.js?9be2:790
g @ sockjs.js?9be2:66
EventEmitter.emit @ sockjs.js?9be2:86
eval @ sockjs.js?9be2:561
setTimeout (async)
InfoReceiver.doXhr @ sockjs.js?9be2:558
eval @ sockjs.js?9be2:525
setTimeout (async)
InfoReceiver @ sockjs.js?9be2:524
SockJS @ sockjs.js?9be2:734
SockJSClient @ SockJSClient.js?0a33:43
initSocket @ socket.js?e29c:20
eval @ socket.js?e29c:39
setTimeout (async)
eval @ socket.js?e29c:38
EventTarget.dispatchEvent @ sockjs.js?9be2:170
eval @ sockjs.js?9be2:973
setTimeout (async)
SockJS._close @ sockjs.js?9be2:961
SockJS._receiveInfo @ sockjs.js?9be2:790
g @ sockjs.js?9be2:66
EventEmitter.emit @ sockjs.js?9be2:86
eval @ sockjs.js?9be2:561
setTimeout (async)
InfoReceiver.doXhr @ sockjs.js?9be2:558
eval @ sockjs.js?9be2:525
setTimeout (async)
InfoReceiver @ sockjs.js?9be2:524
SockJS @ sockjs.js?9be2:734
SockJSClient @ SockJSClient.js?0a33:43
initSocket @ socket.js?e29c:20
eval @ socket.js?e29c:39
setTimeout (async)
eval @ socket.js?e29c:38
EventTarget.dispatchEvent @ sockjs.js?9be2:170
eval @ sockjs.js?9be2:973
setTimeout (async)
SockJS._close @ sockjs.js?9be2:961
SockJS._transportClose @ sockjs.js?9be2:920
g @ sockjs.js?9be2:66
EventEmitter.emit @ sockjs.js?9be2:86
WebSocketTransport.ws.onclose @ sockjs.js?9be2:2979

2、解决办法在vue.config.js添加如下配置：

module.exports = {
    chainWebpack: config => {
        // 修复HMR
        config.resolve.symlinks(true)
    },
    css:{
        extract: false,
    }
}