vue3使用vscode开发遇到热更新问题(文件保存页面不实时更新)

原创 最新推荐文章于 2026-10-21 10:21:58 发布 2.5k 阅读 AI写同款
Hello-Mr.Wang
Hello-Mr.Wang 博客等级 码龄5年 墨衍会员 · AI 创作全网分发 墨衍智能分发 本文由作者通过墨衍一键同步至各平台 1分发平台 2.5k累计阅读 2.5k平均单平台 已同步平台 优快云 微信公众号 微博 知乎 掘金 百家号 博客园 抖音 小红书 你的文章也可以这样分发 墨衍会员 ¥399起/年，写一次发全网 我也要
1384粉丝53篇原创
关注
vite3+vue3 HMR热更新无效 页面无法局部自动更新（需手动刷新页面）的问题解决 开发vite3+vue3项目 HMR 热更新无效、页面不能局部自动更新（需手动刷新页面）的问题。Vite和Vue版本不兼容。 阅读详情
AI摘要

博客主要讨论Vue.js页面热更新问题。一是所有页面都不热更新，可检查并重新安装Live Server插件；二是个别页面无热更新，需检查路由文件中导入的文件名称与项目中文件名字是否一致，包括大小写。

1.第一种情况是所有页面都不热更新

检查Live Server插件，确保安装，安装也无效可以试一下重新安装

2.只有个别页面没有热更新(本人是这种情况)

遇到这种情况就要检查路由文件中导入的文件名称与项目中文件名字是否一致(大小写也要一样)

若路由文件中 导入的为Home 那么home页面就会出现无热更新的问题，此时名称一定要保持一致！

标签
#javascript #vue.js
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
热更新功能的实现 前言： live server 是一个vs code的热更新插件。可以帮你在修改代码保存后，自动刷新页面，大大提升了我们开发的效率。 分析： 首先，我们要实现一个功能，页面如何知道我们的代码更改了？也就是如何实现我们的代码与浏览器页面通讯。我们很容易就能想到，使用websocket。 下面是具体的实现。 实现思路： 1、服务器使用node创建一个websocket服务 2、浏览器使用websocket与服务器进行通讯 3、双方通过对应api来进行数据交换。 实现： 1、开启一个http服务器 const 阅读详情

相关推荐

VSCode开发Vue3+TS项目中遇到各种波浪线（诊断信息）

在使用Visual Studio Code（VSCode）开发Vue3 + TypeScript项目时，会遇到各种波浪线错误（诊断信息），这些问题或错误通常由以下几人原因引起的：typeScript配置问题、ESLint配置问题、Vetur或Volar插件问题、项目依赖问题、第三方插件问题、重启VSCode。解决方法有：检查错误类型、搜索解决问题等

觉醒法师的专栏 2499

VSCode 设置热更新

热更新的方法

xiaowude_boke的博客 2783

鸿蒙手机卸载内置应用 adb连接

**傻瓜式删除鸿蒙系统内置应用，自己亲测有效。**

JJDXBT的博客 3万+

vscode修改vue文件，热更新失败,不会自动刷新

vscode修改vue文件，热更新失败,不会自动刷新

hch的博客 4301

Starlink第三代终端和第二代终端的差异性有哪些？

starlink第三代终端和第二代终端的额差异

chen2jiang3的博客 2927

PCIe扫盲（三）

需要特别注意的是，PCIe的Spec中明确规定只有Root有权限发起配置请求（Originate Configuration Requests），也就是说PCIe系统里面的其他设备是不允许去配置其他设备的配置空间的，即peer-to-peer的配置请求是不允许的。当配置请求进行BDF路由的时候，正是依靠这些信息来确定要找的设备的。前面的文章还介绍过，Root和Switch的每一个端口中都包含一个P2P桥，并且知道桥的配置空间头（Configuration Space Header）是Type1型的。

Liuqz2009的专栏 2403

VSCode 热跟新

VSCode热更新

weixin_44600183的博客 1803

Concentration Inequality(集中不等式)更新版

欢迎来我博客 https://wyue.name/2020/04/17/1/阅读这一篇博文 转载前请联系我，联系方式请见我博客 https://wyue.name/ Concentration inequality 刻画了一组随机变量的和（或者样本平均数）与其期望值的偏离程度，在算法收敛性分析过程中是非常有用的一类不等式。 这次主要总结一下最近一段时间遇到的集中不等式，不仅是不等式形式，...

Yue的博客 4554

VsCode工具开发vue项目必装插件

VsCode工具开发vue项目必装插件 目录VsCode工具开发vue项目必装插件1.概述2.VsCode插件清单2.1.Vetur插件让vue文件代码高亮2.2.Vue VSCode Snippets自动生成vue模板内容插件1.安装插件2.使用插件生成vue模板代码2.3.LiveServer实时刷新网页1.安装LiveServer2.使用LiveServer打开网页3.开启自动保存2.4.开发工具设置2个空格缩进2.5.browser插件浏览器插件查看html文件1.安装创建2.浏览html文件 1.

Bruce小鬼 3万+

AI产品经理必备：Agent评测维度、指标与工程化落地指南

随着大模型从单轮问答走向复杂的Agent应用，如何科学地评测一个Agent是否真正“办成了事”，成为AI产品经理必须掌握的核心能力。与传统大模型评测关注回答质量不同，Agent评测需要综合评估任务规划、工具调用、多轮对话一致性以及失败自愈等行为。任务完成率与工具调用成功率是最关键的两个量化指标，同时还需关注延迟与Token成本等工程约束。在实际落地中，评测集的设计要覆盖业务主流程与边界场景，并通过批量回归测试与版本对比，为产品选型、算法迭代和上线决策提供数据支持。本文系统拆解了Agent评测的完整流程，帮助

weixin_29057163的博客 344

Qwen3.5在昇腾NPU上部署：vLLM-Ascend全链路实战

大语言模型推理框架（如vLLM）通过PagedAttention等内存调度机制，显著提升显存利用率与吞吐性能；国产AI芯片（如昇腾NPU）需配套专用算子优化与硬件感知调度才能释放真实算力。本文聚焦Qwen3.5大语言模型在昇腾平台的端到端部署，深入解析vLLM-Ascend如何协同CANN工具链、适配RoPE位置编码与Tokenizer映射、调优block_size与kv_cache_dtype等关键参数，实现单卡42 tokens/s高吞吐与112ms低延迟。内容覆盖环境验证、源码编译、模型权重转换、服务

weixin_34335458的博客 279

uniapp微信小程序使用vscode代替HBuilderX开发uniapp微信小程序并且vscode改动代码微信开发者工具能实时更新

uniapp微信小程序使用vscode代替HBuilderX开发uniapp微信小程序并且vscode改动代码微信开发者工具能实时更新；解决Vs Code 出现`类型“{ class: string; }”的参数不能赋给类型`错误

wocwin的博客 8944

RK3566-预装APP

提示：文章写完后，目录可以自动生成，如何生成可参考右边的帮助文档。

qq_24093081的博客 702

使用 VSCode 开发 Vue 3 文本组件：详细教程

在这篇文章中，我们将一步步展示如何在 Vue 3 环境中使用 VSCode 开发一个简单的文本组件。这个组件允许用户输入文本，并且会实时显示输入的内容。环境准备首先，确保你的开发环境已经安装了以下工具：Node.js：Vue 3 需要 Node.js 环境。可以通过 Node.js 官网 下载并安装。VSCode：推荐使用 Visual Studio Code（VSCode）作为开发工具，它拥有丰富的插件和强大的调试功能。

堇以无笙的博客 2066

浅谈银行内部户治理

为避免该问题的发生，对内部户入账类交易，或内部户是可透支的账户（如系统间往来），可考虑通过异步方式更新账户余额（当然，根本上还是要考虑银行业务量的实际，异步消息接口很多时候没有同步接口方便），另外，在进行内部户余额更新时，可以通过定时的借贷方发生额轧差的方式，将多次的锁请求，简化为一次（当然，发生额明细本身在加工账户交易历史时，是不能汇总的）。内部户在银行系统中，属于业务属性较少，实现相对简单，原理也很容易讲清的系统，但管中窥豹，越是基础的东西，越能看出一家银行业务、内控的专业程度。

银行信息系统应用架构详解 789

NTscan扫描工具

ntscan是一个扫描器，可以扫描没有密码和弱密码的共享，先到配置文件中填写猜测的用户名和密码，扫描过程中右侧出现的是扫描日志。

推荐使用：Vue VSCode Snippets，让Vue开发更高效

Vue VSCode Snippets是一个专为Vue开发者设计的Visual Studio Code扩展插件。它提供了一系列实用的代码片段，旨在提升开发效率，减少日常开发中的重复工作。无论你是Vue 2还是Vue 3的使用者，这个插件都能让你的工作流程变得更为流畅。 ![vue-snippet-hero](https://s3-us-west-2.amazonaws.com/s.cdpn.io...

gitblog_00461的博客 1338

jdk-8u144-linux-x64.tar.gz.

该资源为搭建Linux系统Java环境用，资源的后缀为tar.gz格式的压缩包

Vue3 学习教程，从入门到精通，使用 VSCode 开发 Vue3 的详细指南（3）

本文详细介绍了使用VSCode开发Vue3项目的完整流程，包括环境准备、项目创建、关键语法和实战案例。主要内容涵盖：Node.js/VSCode安装、Vite创建项目、组件基础、数据绑定、常用指令(v-bind/v-if/v-for等)、计算属性与侦听器、生命周期钩子、组件通信方式以及组合式API(setup/ref/reactive等)。通过计数器、待办列表等案例演示Vue3核心功能，帮助开发者快速上手Vue3开发。

qq_45746668的博客 1450

Camera2Demo

在Camera2 的基础上进行封装，使得Camera2一堆初始化逻辑与Activity分离，降低耦合度，完成预览拍照并保存的操作

Statistics and Machine Learning Toolbox

Statistics and Machine Learning Toolbox（带书签），MATLAB统计学习工具

vsCode下开发vue3+typescript需要的插件及代码格式化

真的是被代码格式化搞烦了，在网上抄答案，但是发现大多数答案互相抄袭，还过时了。所以只能狠下心自己搞明白这些插件到底都什么用处。 选取插件的标准：尽可能还在维护 举个例子，vue代码格式化推荐最多的两个格式化插件“beautify”和“prettier”，我两个都尝试了，一度觉得“beautify”好用，但是总感觉差点意思，然后对比了一下，发现“beautify”好久不更新了，再看“prettier”还在更新，果断选择“prettier” vue3开发必备插件 TypeScript Vue Plugin (V

lsjweiyi的博客 2万+

Vue Designer终极指南：VSCode中实时预览Vue组件的完整教程

Vue Designer是一个专为Vue.js开发者设计的VSCode扩展工具，它能够在编辑器内提供Vue单文件组件的实时预览功能，彻底改变了传统的开发工作流。通过这款强大的Vue组件设计工具，开发者无需频繁在编辑器和浏览器之间切换，即可直观地查看组件效果，大幅提升Vue开发效率。 ## Vue Designer核心功能解析 Vue Designer作为一个专业的Vue组件可视化工具，具备以下

gitblog_00788的博客 1104

vue开发者必备vscode插件【2024最新】

Vue.js 是一个流行的前端框架，而 Visual Studio Code (VSCode) 是许多开发者的首选代码编辑器。通过使用这些插件，你可以显著提高你的 Vue.js 开发效率和代码质量。不过，值得注意的是，随着技术的发展，可能会有新的插件出现，或者现有插件的功能会发生变化。因此，建议定期关注 VSCode 插件市场的动态，以便获取最新的工具和功能。对于需要额外配置的插件，如 ESLint 或 Prettier，你可能需要创建或修改项目中的配置文件，或者调整 VSCode 的工作区或全局设置。

liyananweb的博客 1万+

vscode开发vue项目的一些必备插件

一些vecode开发vue的插件 Eslint 检查代码是否符合规范 GitLens   Git提示 language-stylus   stylus语法支持 Path Intellisense   相对、绝对路径提示 Prettier formatter   代码格式化 Vetur   Vue语法支持。包括语法高亮、语法代码提示、语法lint检测等 Vue VSCod...

jiongsin的博客 5143

VSCode中Vue文件代码不高亮的解决指南

中的代码无法高亮显示，但其他后缀文件（如CSS、HTML、JavaScript）的语法高亮正常。Vue文件高亮问题通常可通过以上步骤解决。若仍无法修复，可尝试在GitHub的。提交Issue，附上具体错误日志以便开发者定位问题。希望这篇指南能帮助读者高效解决Vue高亮问题！

qq123456xxd的博客 2607

vscode vue3 typescript开发环境搭建

今天搞一下vue3环境，用这玩意看看好使不。vue2早期的语法看起来真实够呛，嵌套比较深。以前看过一个妹子写的react代码，发现里面很多js在控制样式和html,三个东西揉在一块也是厉害了。不知道是不是react本身的风格。vue3本身风格要接近原生js了，提倡组合式API,但是还是有些距离。从语法使用上来说还是早期原生js风格统一，没有各种套路，都是拿来就用，纯组合。这组件方开发感觉看起来不直白，一个页面里面很多自定义组件，不看源码不知道时啥玩意。比如<MyComp/>这时啥玩意？

yanghuashuiyue的专栏 1439

【Web】使用Vue3开发鸿蒙的HelloWorld！

本文介绍了如何利用Vue3与HarmonyOS ArkUI框架进行鸿蒙原生应用开发。通过Vue3的响应式编程范式和ArkUI的声明式UI语法，开发者可以快速构建高性能的跨端应用。文章详细描述了从环境搭建到应用落地的全流程，包括开发环境的配置、Vue项目的创建与修改、静态资源的生成与导入，以及如何在DevEco Studio中进行应用签名和运行。最终，开发者可以将Vue3项目成功移植到华为Mate 60 Pro上，实现“一次开发，多端部署”的目标。

沙师弟专栏 3362

VSCode扩展(前端Vue开发使用)

以下扩展是我编写当前项目代码使用到的，记录一下 Debugger for Chrome VS中启动Chrome控制台 Auto Rename Tag 重命名一个HTML / XML标签时，自动重命名配对的HTML / XML标签 background 这个就是一个非常可爱的美化背景，我称它为“小可爱”，每次编程都会心情美好，有bug报红也不能生气，哈哈哈 Beautify 自动对html，js，css进行格式化对齐显示 Bootstrap 3 Snipper .

学习记录 8910

史上最快上手Vue+Autojs PS. 像开发Vue前端一样开发autoJS

像开发Vue前端一样开发autoJS, autojs 开发热更新app,修改脚本无需重新打包app

qq_16229631的博客 3810
上一篇： 通过FileReader API获取上传音频的长度
下一篇： git修改最近一次commit信息
点赞 7
评论 0
书签 书签 2
Hello-Mr.Wang
Hello-Mr.Wang
博客等级 码龄5年 1384粉丝 53原创
+ 关注
评论
成就一亿技术人!
拼手气红包6.0元
还能输入1000个字符
 
表情包 插入表情
表情包 代码片
 条评论被折叠 查看
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值