Intellij IDEA - 实现项目的热部署3(使用LiveReload实现静态资源热部署)

作者: hgother 发布时间: 2020-01-09 浏览: 430 次 编辑

之前我写过文章介绍如何通过 spring-boot-devtools 模块实现项目的自动编译重启(点击查看),其实 devtools 默认还嵌入了 LiveReload 服务器,可以解决静态文件(html 页面、图片、css 样式、js 脚本等)的热部署问题。即在资源发生变化时自动触发浏览器更新(不会重启项目)。下面通过样例进行演示。

1,项目中安装 devtools

首先我们需要在项目中添加 devtools 依赖,并对 IDE 进行一些相关设置。具体可以参考我之前写的这篇文章:

2,浏览器安装 LiveReload 插件

(1)LiveReload 支持 ChromeFirefox 以及 Safari。这里以 Chrome 为例,在 Chrome 应用商店搜索 LiveReload 进行安装:

原文:Intellij IDEA - 实现项目的热部署3(使用LiveReload实现静态资源热部署)

(2)安装后在 Chrome 右上角会有个 LiveReload 图标(此时中间圆点为空心的)

原文:Intellij IDEA - 实现项目的热部署3(使用LiveReload实现静态资源热部署)

3,测试使用

(1)首先启动 SpringBoot 项目,可以看到 LiveReload 服务已经启动(端口为 35729

原文:Intellij IDEA - 实现项目的热部署3(使用LiveReload实现静态资源热部署)

(2)接着我们在浏览器中打开项目的页面,然后单击浏览器右上角的 LiveReload 按钮(此时中间圆点变成实心),开启 LiveReload 连接。此时当静态资源发生改变时,浏览器就会自动加载。

注意:只有单独打开一个项目时,每次编辑保存后,浏览器那边才会自动加载更新。
如果打开多个项目(即使其它项目没有启动),编辑保存后浏览器是不会自动加载更新的。必须手动编译一下(点击 idea 右上角小锤子图标),浏览器那边才会自动更新(不用刷新浏览器)

原文:Intellij IDEA - 实现项目的热部署3(使用LiveReload实现静态资源热部署)


原文出自:www.hangge.com 转载请保留原文链接:https://www.hangge.com/blog/cache/detail_2658.html