vue-cli构建的项目，.vue文件修改无法热更新的问题

最新推荐文章于 2024-05-11 14:26:07 发布
最新推荐文章于 2024-05-11 14:26:07 发布
阅读量6.3k 收藏 1
点赞数 3
文章标签： javascript 开发工具 ui ViewUI
原文链接：https://juejin.im/post/5b5326fce51d45195423d25d
版权

今天写vue项目时，发现修改.vue文件时热更新不响应了，一开始以为是os系统的问题，后来才发现一个坑～ 如图：

如果文件的目录和vue-router的路径大小写不一致，项目本身不会报错，但是热修复却失效了。。。

此情况同样适用于.vue文件里组件的引用，大小写不一致的话，也会导致子组件热修复失效哦。

转载于:https://juejin.im/post/5b5326fce51d45195423d25d

weixin_34004750
关注
  • 3
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
详解vue-cli构建项目反向代理配置
01-19
本文介绍了vue-cli构建项目反向代理配置，分享给大家，具体如下： proxyTable: {//配置请求代理 '/dlsys':{ target:'http://192.168.16.209:81', changeOrigin:true, pathRewrith:{ '^/dlsys': '/dlsys' } }, '/...
vue修改部分文件热更新失效
吴小迪的博客
12-06 3417
笔者最近遇到了vue修改文件热更新的失效的问题【并不是改所有的文件都失效，是改部分文件失效】 每次更新完那个文件的代码之后页面并不会有反映，即使刷新页面也没有获取到刚刚更改的文件的最新效果。必须重启项目才可以看到最新的更新。最开始是以为有什么配置，比如某些文件的更改会触发热更新，某些文件的更改不会触发热更新。但是经过查看vite.config.ts文件并未发现有相关的配置，且hmr:true。然后笔者排查到此由于时间原因就放弃了【就每次更改完文件内容然后就重启一次服务，非常麻烦浪费精力】。最终在编译部署的时
vue-cli 项目热重载（热更新）失效的解决方法
我的米饭
11-04 8179
打开 node_modules 下的这个文件 sockjs-client\dist\sockjs.js
vue项目无法热更新 问题解决
qq_44741577的博客
05-11 781
如果没有安装，可以使用以下命令进行安装。
webpack和vue热更新
LY18483的博客
09-15 2456
webpack的热更新和vue热更新的关系和实现原理
vue3+vite框架，修改代码后，热更新失效
W78955的博客
10-12 2138
vue3+vite框架，修改代码后，热更新失效
【疑难杂症】vue-cli热更新失效
onionlsh的博客
03-26 9281
前情提要 公司又双叒要搭建新的前端项目，以前用vue-cli3.0，所以这次就是用vue-cli4来搭建一下玩玩。 结果玩不好，vue-cli搭建的vue项目，部分热更新失败。主要体现在：1..vue文件的修改，可以实现热更新；2.在main.js等引入的文件，无法实现热更新。 过程 私以为是vue-cli版本不同导致的，所以在找度娘的过程中，也指定了是vue-cli4 结果试过很多方法： 1.配置vue.config.js，几个关键的属性也都开了 devServer: { hot:
关于VUE-CLI脚手架热更新不起效的原因
zjlove的博客
04-13 1万+
学习VUE的过程中用VUE-CLI脚手架搭建时偶然发现热更新失效了， 在网上找解决方案有提到webstrom的safe wirte的原因，但并不能解决我的问题， 经测试发现某些目录可以某些目录不可以，后来查出是因为目录名中带有小括号，改了目录名之后问题解决， 其它符号不知道会不会也会出现这种情况，在这里记录一下
详解vue-cli 构建项目 vue-cli请求后台接口 vue-cli使用axios、sass、swiper
08-27
在本文中，我们将详细讲解如何使用 Vue CLI 构建项目，以及如何在项目中使用 axios、Sass 和 Swiper。 首先，我们来安装 Vue CLI： ```bash npm install -g @vue/cli ``` 然后创建一个新的基于 Webpack 模板的...
vue-cli-master.zip
01-10
这个"vue-cli-master.zip"文件包含了使用 Vue CLI 3 创建的一个完整的在线购物商城项目。Vue.js 是一套用于构建用户界面的渐进式框架，以其灵活性、易学性和高效性在前端开发领域广受欢迎。 在该项目中，你将找到...
详解vue-cli 构建Vue项目遇到的坑
08-29
Vue CLI 构建 Vue 项目遇到的坑 在使用 Vue CLI 构建 Vue 项目时，可能会遇到一些坑，...在使用 Vue CLI 构建 Vue 项目时，可能会遇到一些坑，但通过配置和修改相关文件，可以解决这些问题，提高开发效率和项目质量。
vue-cli热更新 失效
龙丨行的博客
04-12 5468
如果vue.config 中devServer有client 相关设置，那么就把他们注释掉，重启服务就好了。 其他： 为啥要加这段代码？ port: 8080, client: { webSocketURL: 'ws://192.168.1.7:8080/ws', }, 原本是想解决 WebSocketClient.js?5586:16 WebSocket connection to ‘ws://192.168.1.7:8080/ws’ failed: 这样的报错
vue-cli项目修改文件热重载失效
qq_27868533的博客
03-23 4197
       遇到一个很奇怪的问题，就是之前vue-cli创建的项目，在起初修改文件可以热重载，但是后面突然间就无法无刷新浏览器更新了，一只以为是热重载出问题了，折腾了半天也没纠结出什么结论，最后百度了一下，原来是编译器webstrom的锅。 问题原因      &nbs...
vue-cli3 热更新配置
weixin_39975379的博客
02-25 3万+
问题： 在使用vue-cli3搭建项目之后，发现修改.vue文件里面的内容之后，页面不会自动刷新。 解决方案： 只需要在vue.config.js文件中配置一下就可以实现热更新了，如下： chainWebpack: config => { // 修复HMR config.resolve.symlinks(true); }, 是的就是这么简单。...
vue 不能进行热更新问题的解决
zuo-yiran的博客
06-19 7384
在vue项目中，之前热更新还是好的，突然发现在macos上失败，修改代码需要npm run dev进行重启才能更新，非常影响开发效率，但是不是所有的页面都是这样。 然后发现一个大坑，文件名称与实际路径文件夹名称大小写有误。但是可以运行。 解决办法：检查文件夹名称是否正确，确保引入文件夹名称与路径的文件夹名称大小写保持一致。 经过查找，网上还列举了一些别的可能引起热更新失效的解决办法： 1.添加ru...
vue脚手架修改组件网页没有热更新
weixin_42665200的博客
04-11 2877
今天做项目的时候，因为需求问题，需要修改组件文件中部分数据。随后就发现一个问题，每次修改完组件中数据之后，vue都没有热更新。 每次都需要手动重启项目 npm run dev，很耽误时间。 后来实在是忍受不了，通过找问题发现是组件文件名字的问题。我的文件名字是小写，但是页面引用的组件文件名却是大写，这样虽然不会导致组件引用报错，但是会阻止页面热更新。 因此把组件的文件名改为大写，与页面引用...
vs开发vue，无法热更新
qq_30304193的博客
09-18 1万+
Visual Studio Code开发vue，用npm run dev跑本地服务，修改代码之后在浏览器刷新没反应，需要重新跑一遍代码才会更新，这是怎么回事呢？ 我遇到的情况是没有自动保存，自己手动保存代码会发现浏览器自动更新了。只需要讲vs改为自动保存即可，如下图： ...
vue修改数据页面不重新渲染
热门推荐
jerryyang_2017的博客
09-06 5万+
使用vue，遇到几次修改了对象的属性后，页面并不重新渲染，场景如下： <template v-for="item in tableData"> <div :class="{'redBorder':item.red}"> <div>{{ it
npm i vue-cli [..................] - idealTree:Manage: sill idealTree buildDeps
最新发布
05-18
安装了vue-cli之后，你就可以用它来快速构建一个Vue.js的项目。在使用vue-cli创建项目时，会自动生成一些初始文件和目录，帮助你快速开始Vue.js项目开发。 关于命令中出现的 [..................] - idealTree:...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值