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) 注意：此方法代码简洁，但还是有刷新页面以后短暂留白的效果 ...
umi@4 模板项目配置nginx转发后页面不断刷新的问题
qq_43271423的博客
02-05 1708
umi@4 模板项目配置nginx转发后页面不断刷新的问题
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;{ }
Vue 项目配置自动更新，自动刷新页面
王龙鑫的博客
06-09 4478
今天用户反馈使用页面的时候，有时候点击没反应，排查下来，是因为发布版本的时候，用户那边没有加载最新的文导致的，然后根据思路，做了这个自动更新的功能。
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自动启动服务器
小废物
10-08 910
Vue自动启动服务器 1. 通过 package.json 配置项目 在scripts 中"serve": "vue-cli-service serve", 后面增加 --open "scripts": { "serve": "vue-cli-service serve --open", "build": "vue-cli-service build", "lint": "vue-cli-service lint" }, 2. 创建如图所示的vue.config.js（项
VsCode 如何做到保存即刻刷新浏览器？
Moai_0的博客
01-20 3977
这是一个前端使用 VsCose 工具可能遇见的一个小问题 ”关于如何解决保存即刻刷新浏览器“ ，能够帮助大家省去刷新浏览器的时间，快速看到其效果。
vue 项目配置 vuex 并开启热更新
qq_43477721的博客
10-03 1225
安装 vuex 啥的，就不说了，大家都会。 安装好之后，就要开始了。 src 文件夹下新建一个 store 文件夹 （即，store文件夹下，创建四个文件夹，每一个文件夹下创建一个同名的 js 文件） store.js import Vuex from 'vuex' import defaultState from './state/state' import mutations from './mutations/mutations' import getters from './getters/ge
vue 项目便于 高效开发的依赖
estrusKing的博客
03-15 496
vue 项目便于 高效开发的依赖。
vue 如何实现页面操作之后自动刷新
小球的博客
03-15 4196
然后在其他接口调用完毕之后，执行下面语句，也就是你想在什么操作之后进行刷新重载页面，加上下面这行代码。近半年时间在接触vue写pc页面，文中内容即在实际的开发过程中遇到的实际问题。然后在具体的页面的export default中，新增下面一行设置。实际执行的是你这个页面上的 created() 创建页面的语句。需要在app.vue文件按照如下代码设置。
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、付费专栏及课程。

余额充值