如何在Frappe+Vue环境下无需独立开发服务器实现localhost:8000自动重载

核心方案：文件监听 + 浏览器自动刷新脚本 #

Frappe内置服务器本身不支持前端热重载，我们可以通过监听静态资源文件变化并向页面注入自动刷新脚本的方式实现需求，无需独立前端服务器，继续使用localhost:8000。

步骤1：安装文件监听工具 #

使用livereload包监听文件变化并通知浏览器刷新：

npm install livereload --save-dev

步骤2：编写监听脚本 #

在Vue项目根目录创建livereload.js文件，配置监听Frappe的www文件夹及Vue打包输出目录：

const livereload = require('livereload');
const path = require('path');

// 创建livereload服务器（默认端口35729）
const server = livereload.createServer();

// 监听目标目录，替换为你的实际路径
server.watch([
  path.resolve(__dirname, '../www'),
  path.resolve(__dirname, '../www/dist')
]);

console.log('Livereload 服务器已启动，监听文件变化...');

步骤3：向Frappe页面注入刷新脚本 #

在Frappe的www目录下的目标HTML页面末尾添加livereload脚本标签，让页面接收刷新通知：

<!-- 放在</body>标签之前 -->
<script>
  // 自动适配当前域名注入刷新脚本
  document.write('<script src="http://' + (location.host || 'localhost').split(':')[0] + ':35729/livereload.js?snipver=1"><\/script>');
</script>

步骤4：配置Procfile启动所有服务 #

修改项目根目录的Procfile，添加livereload和Vue watch命令，确保和Frappe服务器一起启动：

web: bench start
frontend: npm run watch # 替换为你的Vue项目中开启watch模式的脚本命令
livereload: node livereload.js

步骤5：关闭Frappe静态资源缓存（推荐） #

在Frappe的site_config.json中添加配置，禁用静态资源缓存，避免浏览器加载旧文件：

{
  "disable_static_cache": true
}

验证效果 #

1. 运行bench start启动所有服务
2. 修改Vue项目中的文件，等待构建完成
3. 查看localhost:8000的页面，会自动刷新并显示最新内容

替代方案：BrowserSync反向代理（需修改访问端口） #

如果可接受访问代理端口（如localhost:3000），可以用BrowserSync实现更丰富的功能：

1. 安装依赖：npm install browser-sync --save-dev
2. 在Vue配置文件（如vite.config.js）中添加BrowserSync配置，反向代理localhost:8000并监听文件变化
3. 启动后访问localhost:3000，修改Vue文件后浏览器会自动刷新

此方案不符合“继续使用localhost:8000”的核心需求，因此优先推荐livereload方案。

内容的提问来源于stack exchange，提问作者Anandakrishnan P. M