# 动态热更新设置

# 背景需求

  • 前端本地代码是否可以给个链接后端同学访问测试,通过跑前端项目交互,调试接口。

# 解决思路

  • 开发编译的时候,由于我们本地是热更新,如果给后端同学一个本地的链接,他们的链接访问不执行热更新,我们前端开发的链接是热更新,这样就可以了。
  • vue项目的热更新是通过 vue-hot-reload-api 依赖包实现的。我们找到这个依赖包的项目代码,添加判断是否执行热更新就可以了。

# 好处

  • 这样就方便后端同学,不用下载项目安装依赖,能够实时获取前端本地代码进行调式。

# 具体实现

  1. 找到本地 node_modules/vue-hot-reload-api/dist/index.js 文件,
  2. exports.createRecord 函数第一行添加以下代码
if(location.pathname === '/hot'){
    return
}
  1. 比如编译生成的链接是 http://[your id address]:8080/#/, 只需把链接更改下, 在#号前面加hot, 如下
http://[your id address]:8080/hot#/

http://[your id address]:8080/hot#/链接发给后端,自己本地的链接就用 http://[your id address]:8080/#/

这样我们本地开发写代码保存。后端拿到的链接不会自动热更新了,他们收到刷新就可以拿到我们最新代码。

更新时间: 2021年11月17日星期三下午5点31分