在Vite中启用自动服务器重载以实现实时更新

针对你遇到的「修改后端代码后需手动重启Vite代理+刷新浏览器」的问题，以下是几种实用解决方案：

方案一：让Vite监听后端文件变化直接触发刷新 #

Vite的开发服务器支持监听指定目录的文件变化，一旦后端代码改动，自动触发前端页面刷新。

1. 修改vite.config.js，添加server.watch配置，指定后端代码的路径（根据你的实际项目结构调整）：

export default {
  server: {
    proxy: {
      '/api': {
        target: 'http://localhost:8000',
        changeOrigin: true,
        secure: false,
        ws: true,
        timeout: 10000,
        rewrite: path => path.replace(/^\/api/, ''),
      },
    },
    watch: {
      // 监听后端代码目录，示例为上级目录的server文件夹
      include: ['../server/**/*'],
      // 可选：排除不需要监听的目录，比如node_modules
      // exclude: ['../server/node_modules/**/*']
    }
  },
}

2. 后端用自动重启工具启动：

• 原生Node.js（18+版本支持）：node --watch server.js
• Nodemon（兼容低版本Node）：nodemon server.js

这样后端代码修改后，后端自动重启，Vite监听到文件变化会立刻刷新前端页面。

方案二：通过后端健康检查触发前端自动刷新 #

如果不想让Vite监听后端文件，可以在前端定时检查后端状态，当后端重启后自动触发刷新。

1. 后端添加健康检查接口（以Express为例）：

app.get('/api/health', (req, res) => {
  // 返回服务器启动时间戳
  res.json({ timestamp: Date.now() });
});

2. 前端入口文件（比如main.js）添加定时检查逻辑：

let lastServerTime = Date.now();

// 每2秒检查一次后端状态
setInterval(async () => {
  try {
    const res = await fetch('/api/health');
    const { timestamp } = await res.json();
    // 时间戳更新说明后端已重启
    if (timestamp > lastServerTime) {
      lastServerTime = timestamp;
      // 触发页面刷新，或用Vite热重载API
      import.meta.hot ? import.meta.hot.reload() : window.location.reload();
    }
  } catch (err) {
    // 后端重启过程中可能请求失败，忽略即可
  }
}, 2000);

方案三：用concurrently同时管理前后端服务 #

通过concurrently同时启动Vite开发服务器和后端自动重启服务，简化操作流程。

1. 安装依赖：

npm install concurrently nodemon --save-dev

2. 修改package.json的scripts：

{
  "scripts": {
    "dev": "concurrently \"vite\" \"nodemon server.js\"",
    "server": "nodemon server.js",
    "client": "vite"
  }
}

3. 运行npm run dev，即可同时启动前后端服务，后端代码修改自动重启，结合方案一的Vite监听配置就能实现自动刷新。

内容的提问来源于stack exchange，提问作者Michael