Vue项目保存代码之后页面自动更新

最新推荐文章于 2024-05-14 15:00:16 发布
原创 最新推荐文章于 2024-05-14 15:00:16 发布 · 3.3k 阅读 · 2 ·
CC 4.0 BY-SA版权
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
文章标签：

#vue

博主分享了如何在Vue项目中恢复代码自动刷新功能，通过安装webpack-dev-server解决了手动刷新页面的困扰，适合初学者理解。

我以前写代码的时候 项目保存之后都是会自动更新的 但是最近不知道是什么原因就消失了

找找了半天都是说要配置vue热部署 可是我还是无效

但是我发现了这个

npm install webpack-dev-server

webpack-dev-server 这个东西可以在你保存代码之后不需要再次去手动刷新你的页面了 虽然不知道这是啥 但是确实是有用的

纯小白勿喷QWQ

Vue点击确定或保存以后刷新当前页面
weixin_41346436的博客
09-10 7027
Vue点击事件刷新当前页面 1:方法一 window.location.reload(); 注意：此种方法点击刷新页面以后，网页的当前页面会有短暂的留白效果 2：方法二 this.$router.go(0) 注意：此方法代码简洁，但还是有刷新页面以后短暂留白的效果 ...
关于Vue 编辑/保存后，页面数据不更新的问题
News777的博客
06-10 2094
编辑页面采用Element UI 的el-dialog 组件封装起来，点击修改按钮后异步调用接口，完成后用$emit 让父组件重新调用查询数据接口
vs code vue项目保存浏览器自动化刷新vue-cli3
全村的希望的博客
05-05 3814
解决办法 根目录找到vue.config.js文件， 加以下代码： const IS_PROD = ['production', 'test'].includes(process.env.NODE_ENV) 　css: { // 是否使用css分离插件 ExtractTextPlugin extract: IS_PROD, // 开启 CSS source maps? sourceMap;false, // css预设器配置项 loaderOptions;{ }
umi@4 模板项目配置nginx转发后页面不断刷新的问题
qq_43271423的博客
02-05 1708
umi@4 模板项目配置nginx转发后页面不断刷新的问题
Vue 项目配置自动更新，自动刷新页面
王龙鑫的博客
06-09 4478
今天用户反馈使用页面的时候，有时候点击没反应，排查下来，是因为发布版本的时候，用户那边没有加载最新的文导致的，然后根据思路，做了这个自动更新的功能。
Vue项目vscode 安装eslint插件的方法(代码自动修复)
11-20
通过上述步骤，你现在已经在VSCode中成功安装并配置了ESLint插件，可以实时检测和自动修复Vue项目中的代码风格问题。这将大大提高你的编码效率，同时保证代码质量。请根据你的实际项目需求调整规则，以达到最佳的...
vue cli3 热更新 保存时自动刷新页面内容 + 分离环境变量.env package.json配置
晴天有点孤单
04-11 5912
前几天ts+vue3.0+view-design撸了一个项目，然后总感觉哪里不对劲，今天终于醒悟了原来是热更新没开 在vue.config.js中配置以下选项 const IS_PROD = ['production', 'test'].includes(process.env.NODE_ENV); css: { // 是否使用css分离插件 ExtractTextPlugin ...
精选资源
vue-cli3 热更新配置操作
01-22
在使用vue-cli3搭建项目之后，发现修改.vue文件里面的内容之后，页面不会自动刷新。 解决方案： 只需要在vue.config.js文件中配置一下就可以实现热更新了，如下： chainWebpack: config => { // 修复HMR config....
开发过程中vue项目保存编译慢优化方法
热门推荐
会飞的咕咕鱼的博客
02-21 2万+
问题描述 近期在做一个VUE项目，项目越做越大，相继带来的问提也就越来越多，当前存在的问题是：1.开发过程中，修改一个文件，保存一下项目需要特别久。 2.npm run dev启动项目需要特别久。 吓人吧，作为开发者，相信大家都懂那种感觉（想砸电脑） 优化方法 1.开启uglifyjs-webpack-plugin 的 cache（文件webpack.prod.conf.js） 该方法优化后...
vue项目保存代码后浏览器页面自动更新
qq_43544490的博客
12-26 3936
vue.config.js种添加如上红色色框内内容
vue项目 编辑器保存代码后自动更新浏览器页面内容
zhougushen的博客
10-17 1万+
第一步，在vue项目中找到vue.config.js文件,注意:(2019年10月后创建的新vue项目，之前的是webpage.config.js文件) module.exports = { devServer: { open: true, port: 8812, }, lintOnSave: false } lintOnSave:false是解决eslint过多空格报错问题。 devServer：{ open:true//启动vue..
Vue项目部署后，无需手动清浏览器缓存，自动实现代码更新的方法。
Java12324314的博客
05-14 2399
针对此原因入手，可以给打包后的文件增加最新标识的后缀，这里使用时间戳，此外，前端维护一个记录版本号的文件，在用户操作项目的过程中，进行新老版本号的比对，版本号更改时对浏览器缓存进行reload（这样就无需用户手动刷新浏览器缓存），即可保持项目获取最新代码。前端开发在开发过程应该会中经常碰到：修复代码bug后，打包上线，测试人员需要手动清理浏览器缓存才能看到最新的改动，比较繁琐，而且正式上线后也不可能每次代码部署后都要提醒用户去清除浏览器缓存。项目目录public下新建version文件。
关于vue页面如何自动刷新
WYYYYDSL的博客
08-12 4103
这两种方法都可以达到页面刷新的目的，简单粗暴，但是用户体验不好，相当于按F5刷新页面，会有短暂的白屏，相当于页面的重新载入。2.通过路由跳转的方法刷新，具体思路是点击按钮跳转一个空白页，然后再马上跳回来(个人感觉比较麻烦,不实用)provide / inject 组合 方式感觉比较好用,相对的比前面几种方法好用。1.window.location.reload(),是原生JS提供的方法，this.$router.go(0):是vue路由里面的一种方法,...
带你详解vue中实现全页面或局部刷新的方法
qq_43067585的博客
08-02 5677
vue中怎么实现页面刷新？下面本篇文章给大家介绍一下在vue中实现全页面刷新和局部刷新的方法，希望对大家有所帮助！
Vue 文件保存后，浏览器不自动刷新
Wzw的博客
01-23 1万+
Vue 文件保存后，浏览器不自动刷新 在VScode中，需要保存文件后自动刷新浏览器的内容，否则还得手动刷新浏览器，给开发造成极大的不便。我们要在项目根目录下找到vue.config.js（若没有这个文件，则新建一个），增加 hot: true。 module.exports = { devServer: { port: 3000, open: true, hot: true,//自动保存 }, } 再重新加载项目即可。 ...
vue页面跳转之后，之前页面的样式错乱，刷新之后又恢复正常。解决方法
changyana的博客
10-12 5634
这是css引用错乱导致的，也就是本页面被自动使用了其它页面的css样式。为了防止这种错乱产生，需要给每个页面加上scoped，表示此css样式只在本页面进行使用。
vue.js 2.X--- 热更新配置
yinge0508的博客
10-14 5270
在使用vue-cli3搭建项目之后，发现更改.vue文件里面的代码后，页面显示效果不会自动刷新； 解决方案： 只需要在vue.config.js文件中配置一下就可以实现热更新了，如下： chainWebpack: config => { // 修复HMR config.resolve.symlinks(true); }, 修改css部分的内容并没有自动...
vue2设置保存自动执行run lint配置步骤
蓑笠翁
02-21 1347
分为三部 1、安装eslint 2、setting 3、eslint文件
vue项目保存后不会自动刷新
最新发布
07-11
在 Vue 项目中，保存文件后未自动刷新（HMR 失效）通常与开发服务器配置、缓存或依赖版本不兼容有关。以下是详细的排查和解决方案： --- ### **1. 检查 `webpack-dev-server` 或 `vite` 配置** #### **Vue CLI 项目（Webpack）** - **问题**：`vue.config.js` 中的 `devServer` 配置错误或未启用 HMR。 - **解决**： 1. 确保 `hot: true` 已启用（默认值，但可显式声明）： ```javascript // vue.config.js module.exports = { devServer: { hot: true, // 必须为 true client: { overlay: true, // 显示编译错误 }, }, }; ``` 2. **移除废弃选项**：如 `inline`（新版 Webpack 已移除）。 #### **Vite 项目** - **问题**：`vite.config.js` 中可能覆盖了默认 HMR 配置。 - **解决**： ```javascript // vite.config.js import { defineConfig } from 'vite'; import vue from '@vitejs/plugin-vue'; export default defineConfig({ plugins: [vue()], server: { hmr: true, // 确保为 true（默认值） watch: { usePolling: true, // 解决 Linux 文件监听问题 }, }, }); ``` --- ### **2. 清除缓存** #### **浏览器缓存** - **现象**：修改代码后浏览器仍显示旧内容。 - **解决**： 1. 强制刷新浏览器（`Ctrl + F5` 或 `Cmd + Shift + R`）。 2. 在开发者工具（`F12`）中： - 切换到 **Network** 标签页。 - 勾选 **Disable cache**（如图）。 ![Disable Cache](https://i.imgur.com/JQZ1l0m.png) #### **Node.js 模块缓存** - **现象**：依赖更新后 HMR 不生效。 - **解决**： 1. 删除 `node_modules` 和锁文件： ```bash rm -rf node_modules package-lock.json yarn.lock ``` 2. 重新安装依赖： ```bash npm install ``` --- ### **3. 检查文件监视配置** #### **系统文件监听限制** - **现象**：在 Linux/macOS 上，Webpack 或 Vite 无法监听大量文件。 - **解决**： 1. **Linux**： - 编辑 `/etc/sysctl.conf`，添加： ``` fs.inotify.max_user_watches=524288 ``` - 执行命令生效： ```bash sudo sysctl -p ``` 2. **macOS**： - 运行以下命令： ```bash echo kern.maxfiles=65536 | sudo tee -a /etc/sysctl.conf echo kern.maxfilesperproc=65536 | sudo tee -a /etc/sysctl.conf sudo sysctl -w kern.maxfiles=65536 sudo sysctl -w kern.maxfilesperproc=65536 ``` #### **项目目录权限** - **现象**：开发服务器无权限读取文件变更。 - **解决**： ```bash chmod -R 755 /path/to/project ``` --- ### **4. 更新依赖版本** - **问题**：旧版 `vue-loader`、`@vitejs/plugin-vue` 或 `webpack-dev-server` 可能存在 HMR 兼容性问题。 - **解决**： 1. **Vue CLI 项目**： ```bash npm update vue-loader webpack-dev-server ``` 2. **Vite 项目**： ```bash npm update @vitejs/plugin-vue vite ``` 3. 检查 `package.json` 中版本是否兼容： - Vue 2 需 `vue-loader@15`。 - Vue 3 需 `vue-loader@16+` 或 `@vitejs/plugin-vue`。 --- ### **5. 禁用浏览器扩展冲突** - **现象**：广告拦截器或脚本管理器可能阻止 HMR 请求。 - **解决**： 1. 在无痕模式下测试： - Chrome：`Ctrl + Shift + N`。 - Firefox：`Ctrl + Shift + P`。 2. 逐个禁用扩展（如 uBlock Origin、Tampermonkey）。 --- ### **6. 手动触发 HMR（临时方案）** 如果自动刷新失效，可通过代码手动触发： ```javascript // main.js 或入口文件 if (import.meta.hot) { import.meta.hot.accept(() => { console.log('HMR: 文件已更新，手动刷新页面...'); // 可通过 location.reload() 强制刷新（不推荐） }); } ``` --- ### **7. 检查控制台错误** - **浏览器控制台**： - 查看是否有 `[HMR]` 相关错误。 - 检查是否有 `404` 错误（如未正确加载 `webpack-dev-server/client`）。 - **终端控制台**： - 运行 `npm run serve` 或 `vite`，观察是否有警告（如端口占用、文件路径错误）。 --- ### **8. 创建最小化测试项目** 1. 生成一个新项目测试 HMR： ```bash # Vue CLI vue create hmr-test cd hmr-test npm run serve # Vite npm create vite@latest hmr-test --template vue cd hmr-test npm install npm run dev ``` 2. 如果测试项目正常，说明原项目配置有问题。 --- ### **完整排查流程** 1. **确认开发服务器版本**： ```bash npm list webpack-dev-server # Vue CLI npm list vite # Vite ``` 2. **检查 `vue.config.js` 或 `vite.config.js`**： - 移除所有废弃选项（如 `inline`）。 - 确保 `hot: true` 和 `client.overlay: true`。 3. **清除缓存并重启**： ```bash rm -rf node_modules package-lock.json npm install npm run serve # 或 npm run dev ``` ---
评论 2
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值