最近在写基于vue-cli@4.5写Vue3项目,写着写着发现不太对劲,每次我修改了*.vue文件后都自己手动刷新才显示新修改的内容,我一直记得vue2项目都是有热更新的,而且到Vue3官方文档也说明了脚手架安装的项目自带热更新,拆箱即用
一开始我以为是我项目写的过程中修改了某些配置,导致热更新失败了,我又重新创建了一个vue3项目
结果项目启动后依旧没有热更新,我打开network一看,居然有一堆报错,因为是sockjs.js,所以我猜测我的热更新失败因该是和这个有关
我的报错信息,我看了这个请求的 IP 地址,使用的外部地址,排查了一下该请求应该是走了代理,而我的外部地址并非公网 IP,所以代理之后的请求一定会得不到响应而失败。
那么解决方法就是告诉他我的地址是什么,在vue.config.js中
devServer: {
public: '0.0.0.0:8080',
port: 8080,
}
重新启动项目,发现热更新可以了,而且network中不再显示sockjs报错,而是显示hot-update
因为平时我写vue2项目的时候一般只写了port而没有写public,所以这次vue3的热更新还是开箱即用,一次蛮有意思的折腾,记录一下