webstorm运行vue项目，vue文件中的代码更新，webstorm自动编译后，浏览器没有自动刷新

最新推荐文章于 2024-05-14 15:00:16 发布
最新推荐文章于 2024-05-14 15:00:16 发布
阅读量3.4k 收藏 1
点赞数
文章标签： vue.js webstorm 前端
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/q285675822/article/details/119763069
版权

如题，本地开发环境用的是webstorm ide来开发vue项目，本地有两个项目，一个项目修改vue文件保存后，浏览器自动刷新更新内容，而另外一个项目，文件保存后，浏览器不会自动刷新，需要手动F5刷新页面。

试了很多种办法：

1、webstorm中的settings的safe write选项

2、webstorm中的live edit配置+浏览器的JetBrains_IDE_Support插件

3、chrome中disable cache配置

以上方法通通无效，而且一阵捣鼓后，我项目跑不起来了，然后就把node_modules删掉，重新npm install后，神奇的发现，项目能跑了，而且浏览器能自动刷新了。。。

q285675822
关注
  • 0
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 2
    评论
webstorm搭建vue项目（新手参考）
01-20
安装webstorm 首先安装webstorm，因为webstorm 集成了多种版本控制工具，基本的功能都可以使用，比如git。同时它也支持node.js调试，对于学生也有免费的优惠，稍后会讲如何申请。 webstorm官网 自己选择要安装的...
vue: WebStorm设置快速编译运行的方法
10-17
今天小编就为大家分享一篇vue: WebStorm设置快速编译运行的方法，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
webstorm修改文件，webpack-dev-server不会自动编译刷新
知行合一
04-28 7596
关于Webstorm webpack经常不能自动热更新问题 或者 说不会自动编译刷新 用webstorm修改Vuejs项目时，有一个问题让我困扰了很久，每一次在修改完之后，手动保存时，在Terminal窗口，不会更新和编译，要在代码里改来改去，再去保存，才会更新和编译，而且有时候改一行代码想编译一下看一效果，这个鸟东西就不是会执行，也不知道是那儿出了问题，纠结了很长一段时间，实在没有办法了，这样下太
WebStorm开发React项目，修代码之后不更新
qq_30053399的博客
11-26 5513
说实话这个问题真的很蛋疼，从事前端开发了好几年了，编辑器、idea都用了不少。之前用WebStorm做过一阵在RN，觉得这个玩意挺好用的，而且跟目前流行的很多开发工具都是通用的（说白了就是一个公司做的）。所以，就习惯用这个东西去做任何跟代码有关的事情。 上面的说的这些话都是废话啊！ 昨天遇到一个恶心的问题，我新建了一个React.js项目，想做一点关于Pc端的开发，习惯性的用了WebStorm，
Vue项目部署后，无需手动清浏览器缓存，自动实现代码更新的方法。
Java12324314的博客
05-14 660
针对此原因入手，可以给打包后的文件增加最新标识的后缀，这里使用时间戳，此外，前端维护一个记录版本号的文件，在用户操作项目的过程中，进行新老版本号的比对，版本号更改时对浏览器缓存进行reload（这样就无需用户手动刷新浏览器缓存），即可保持项目获取最新代码。前端开发在开发过程应该会中经常碰到：修复代码bug后，打包上线，测试人员需要手动清理浏览器缓存才能看到最新的改动，比较繁琐，而且正式上线后也不可能每次代码部署后都要提醒用户去清除浏览器缓存。项目目录public下新建version文件。
webstorm vue代码修改后不更新问题
weixin_34242331的博客
07-04 4331
把 safe write 的勾去掉就行了。 转载于:https://www.cnblogs.com/thinkingthigh/p/7118359.html
Webstorm无法自动更新react组件
qq_63520243的博客
01-17 381
必须重新运行该项目，然后才能显示，就超级麻烦，后来发现是webstorm对TypeScript设置不对。（注：不是深度修改导致组件页面察觉不到更新的问题，就只是单纯改一下页面标签里的内容都无法更新）但是修改react组件的时候就不是，每次更改完页面，它既不会自动刷新，浏览器的刷新也不管用。每次直接修改vue页面上的代码，网页就会自动刷新，或者点网页的刷新按钮他也会自动刷新，我尝试了一下，每个项目好像都要这样设置一遍，不知道是什么原因。刚刚接触react组件，之前用的都是vue，
webstorm Vue项目保存浏览器不自动更新问题
热门推荐
小破孩的博客
11-30 1万+
1、首先进去编辑器的设置页面 2、按照以下步骤进行操作，把第三步红框里边的对勾取消，然后保存即可
修改代码后，刷新页面没有更新的解决办法。Disable cache禁止缓存
qq_53298558的博客
01-30 416
修改代码后，刷新页面没有更新的解决办法。Disable cache禁止缓存
webstorm中vue语法的支持详解
08-27
在 Vue 项目中，WebStorm 还提供了代码检测功能。当您编写 Vue 代码时，WebStorm 会检测代码中的错误和警告，并提供相应的提示和解决方案。 四、export default 问题 在 Vue 组件中的 JavaScript 代码中，export ...
详解在WebStorm中添加Vue.js单文件组件的高亮及语法支持
10-19
1. **Vue-for-Idea** (https://github.com/henjue/vue-for-idea)：这个插件能够提供基本的语法高亮和文件模板，使Vue文件在WebStorm中更易读。尽管它的语法支持有限，但它允许在项目文件结构中右键新建Vue文件。 2....
WebStorm 遇到的问题总结
10-20
主要介绍了WebStorm 遇到的问题总结的相关资料,需要的朋友可以参考下
webstorm+vue初始化项目的方法
12-12
安装完依赖后，你可以通过`npm run dev`启动项目开发服务器，这将编译源代码并实时刷新页面。在浏览器中打开提示的URL，你就能看到项目的运行效果。 项目的目录结构通常如下： - `build`：包含构建脚本，负责将源...
WebStorm 开发react热部署，文件保存后页面未更新
deyi5353的博客
08-16 678
使用脚手架创建的react项目，理论上使用npm run dev后，如果文件发生变化，网页会自动发生更新，但在使用WebStorm开发时，发现修改文件后网页内容为自动刷新，按如下方式修改即可。 File->Settings->System Settings修改成如下 转载于:https://www.cnblogs.com/wyhong/p/7374629.htm...
vue 参数修改后，页面无效（不刷新）
u014685642的博客
02-12 1579
尝试过多种办法，只有强制刷新是靠谱的 this.$forceUpdate();
Vue项目保存代码之后页面自动更新
a1783118的博客
08-01 3605
Vue项目保存代码之后页面自动更新
vue配置别名alias在webstorm不生效
weixin_41223530的博客
12-09 2303
今天在配置vue.config.js别名时,发现使用别名不生效,代码没有问题 最后发现是在webstorm的webpack配置问题,将webpack开启自动即可 注好像2019版本的webstorm没有自动的选项,只有已禁用和手动的选项,2020的版本不知道,我用的是2021版本是有这三个选项 如果是没有自动选项的版本的webstorm.可以在本地新建一个js文件,代码如下,命名随意,放置的磁盘随意 const path = require('path') module.exports = { c
webstorm自动生成vue代码
最新发布
07-05
WebStorm是一款强大的JavaScript IDE，特别适合Vue.js等前端框架的开发。其中，它内置了对Vue的智能感知和代码生成功能，能够帮助开发者更加高效地编写Vue应用。 当你在WebStorm中编写Vue项目时，可以通过以下几个步骤自动生成 Vue 代码： 1. **自动完成和提示**：当你输入 Vue 的指令（如 `v-` 或者 `export default {`）时，WebStorm会提供相关的提示，比如 `v-if`、`v-for` 等，选择其中一个后，它会自动补全相应的模板语法或属性。 2. **代码片段**：WebStorm支持创建和使用代码片段，你可以为常见的 Vue 组件结构（如组件模板、数据选项、方法等）定义快捷方式，只需输入对应的名称，然后选择该片段就能快速插入到代码中。 3. **Vue 插件**：安装并启用 Vue 插件后，WebStorm提供了更丰富的 Vue 集成，如生成 Vue 组件、路由配置、生命周期钩子等功能的代码块。 4. **模板预览**：在编写模板部分时，WebStorm会实时展示 HTML 结果，让你在编写时就看到效果，有助于减少错误。 5. **Vue 路径助手**：对于导入和导出路径，WebStorm能根据项目的结构智能推荐正确的路径，减少手动查找的工作量。 要充分利用这些功能，记得更新WebStorm至最新版本，并根据需要调整设置以匹配你的项目结构和偏好。
评论 2
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值