Vue-cli@4.x sockjs-node/info失败导致无法热更新

最近在写基于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的热更新还是开箱即用,一次蛮有意思的折腾,记录一下

98% after emitting CopyPlugin ERROR Failed to compile with 121 errors 下午1:57:47 error in ../workflows/module/workflow/module/workflowModal.vue?vue&type=style&index=0&id=1daa1fe1&lang=scss&scoped=true Syntax Error: <!--新增和导入 二合一弹窗--> ^ Can't find stylesheet to import. ╷ 2 │ @import "@dataspherestudio/shared/common/style/variables.scss"; │ ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^ ╵ stdin 2:9 root stylesheet in D:\gdongt\packages\workflows\module\workflow\module\workflowModal.vue (line 2, column 9) @ D:/gdongt/node_modules/vue-style-loader??ref--8-oneOf-1-0!D:/gdongt/node_modules/css-loader??ref--8-oneOf-1-1!D:/gdongt/node_modules/@vue/cli-service/node_modules/vue-loader/lib/loaders/stylePostLoader.js!D:/gdongt/node_modules/sass-loader/dist/cjs.js??ref--8-oneOf-1-2!D:/gdongt/node_modules/cache-loader/dist/cjs.js??ref--0-0!D:/gdongt/node_modules/vue-loader/dist??vue-loader-options!../workflows/module/workflow/module/workflowModal.vue?vue&type=style&index=0&id=1daa1fe1&lang=scss&scoped=true 4:14-475 15:3-20:5 16:22-483 @ ../workflows/module/workflow/module/workflowModal.vue?vue&type=style&index=0&id=1daa1fe1&lang=scss&scoped=true @ ../workflows/module/workflow/module/workflowModal.vue @ ../workflows/module sync ([a-z|A-Z])+.vue$ @ ./node_modules/dynamic-modules.js @ ./src/dynamic-apps.js @ ./src/main.js @ multi (webpack)-dev-server/client?http://192.168.100.70:8080/sockjs-node (webpack)/hot/dev-server.js ./src/main.js error in ../dataService/module/dataManagement/apiIndex.vue?vue&type=style&index=0&id=4fda01e9&lang=scss&scoped=true
06-08
评论 2
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值