热更新-自动刷新浏览器

一、在Vue、react项目开发中集成了基于webpack的热更新,使用gulp等构建工具也会有类似热更新机制。

二、在vscode中可安装 Live Server插件   建议使用

三、在webstrom系列可安装Live Edit插件,需要在浏览器安装 JetBrains IDE support   不建议使用

四、使用--Live.js    不建议使用

  1. 官网--http://livejs.com/    github--https://github.com/Q42/LiveJS

  2. Live.js是一个插件库,使用时直接引入html中即可,默认检测html、css、js,可以在源文件中配置其他的文件后缀来检测比如jsp、php等文件都可以

  3. 不支持直接打开的file协议文件,需要在编辑器中打开才有http协议

  4. 编辑文件后点击浏览器会自动刷新(适用于大部分开发者),在编辑器(idea)中 ctrl+s 后浏览器也会自动刷新(适用于分屏的开发者,不需要鼠标去点击浏览器)

  5. 适用于全局配置的开发环境,部署生产环境时手动注释即可

  6. 需要配置的话可以下载到本地引用,不需要配置的话直接引用官网的即可  <script src="http://livejs.com/live.js"></script>

 

转载于:https://www.cnblogs.com/zhangruiqi/p/9183435.html

### 配置 VSCode 实现浏览器自动刷新 为了实现在 VSCode 中修改代码并保存后,浏览器自动刷新显示最新效果的功能,可以通过安装和配置 Live Server 插件来完成。以下是详细的说明: #### 安装 Live Server 插件 在 VSCode 的扩展市场中搜索 `Live Server` 插件,并点击安装按钮将其添加到编辑器环境中[^1]。 #### 使用 Live Server 插件 一旦插件成功安装,打开一个 `.html` 文件,在该文件上右键单击菜单选项中会出现一个新的条目:“Open with Live Server”。通过选择此选项,可以在默认浏览器中启动一个新标签页,其中加载当前 HTML 页面的内容[^2]。 如果希望更改默认行为以指定特定的浏览器(例如 Google Chrome),可以按照以下步骤操作: 1. 点击左侧边栏中的扩展图标; 2. 找到已安装的 `Live Server` 插件; 3. 右键单击插件名称,然后选择“Extension Settings”进入设置界面; 4. 在设置页面中寻找关于浏览器的选择项,调整为所需的浏览器类型[^4]。 对于 Vue 项目而言,除了依赖于上述通用方法外,还可以进一步优化开发体验。具体做法是在项目的根目录下的 `vue.config.js` 文件内定义如下参数结构: ```javascript module.exports = { devServer: { port: 8080, open: true, hot: true // 启用热更新功能 } }; ``` 这样不仅可以让开发者每次运行服务时自动开启浏览器访问地址,而且还能利用 Webpack 提供的 Hot Module Replacement 技术减少不必要的全量重载次数[^3]。 综上所述,无论是简单的静态网页还是复杂的框架工程,都可以借助合适的工具链轻松达成高效迭代的目的。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值