vite项目保存代码后不刷新页面 vite热更新

问题场景

接手了一个新项目，发现修改代码后，控制台显示hmr更新了文件，但本地运行的项目不会自动刷新页面，每次都要手动刷新。

scss 复制代码

 [vite] (client) hmr update /src/views/Home.vue, /src/views/Home.vue?vue&type=style&index=0&scoped=2dc54a20&lang.scss

解决办法

我尝试了很多办法，也试过更新vite版本，均未解决。过程中发现在修改vite.config.ts文件时，页面能自动刷新，然后就想到写一个脚本，监听项目文件的改动，如果文件有改动，就自动更新下vite.config.ts文件，从而达到刷新页面的效果。

这是我的脚本文件，使用前，需要下载一个插件

复制代码

npm install chokidar -D

监听脚本：

在你的项目跟目录下创建一个scripts/force-refresh.js文件，粘贴以下代码

javascript 复制代码

import fs from 'fs';
import path from 'path';
import chokidar from 'chokidar';

const root = process.cwd();
const viteConfigPath = path.resolve(root, 'vite.config.ts');
console.log(
  `开始监听 ${path.join(root, 'src')}目录下文件是否有改动，改动时将更新 vite.config.ts 以达到刷新页面的效果`,
);

// --- watcher 配置 ---
const watcher = chokidar.watch([path.join(root, 'src')], {
  usePolling: true,
  ignoreInitial: true,
});

let isWriting = false;
let lastUpdated = 0;
const MIN_INTERVAL_MS = 1000;

watcher.on('all', (event, filePath) => {
  console.log(`改动文件: ${event} ${filePath}`);
  if (filePath.includes('vite.config.ts')) return;
  const now = Date.now();
  if (isWriting || now - lastUpdated < MIN_INTERVAL_MS) return;
  triggerUpdate();
});

function triggerUpdate() {
  try {
    const timestamp = new Date().toISOString();
    const text = fs.readFileSync(viteConfigPath, 'utf8');
    const updated = text.replace(
      /\/\/\s*AUTO_REFRESH_MARKER:.*/i,
      `// AUTO_REFRESH_MARKER: ${timestamp}`,
    );
    fs.writeFileSync(viteConfigPath, updated, 'utf8');
    lastUpdated = Date.now();
  } catch (e) {
    console.error(`[force-refresh] ❌ Error updating vite.config.ts`, e);
  }
}

修改package.json，添加一个启动命令

json 复制代码

"dev": "vite",
 "dev-watch": "start /B vite && node scripts/force-refresh.js",

dev是原本有的命令， dev-watch是我们添加的命令，注意你的force-refresh.js是否放在scripts文件夹下。

拓展

针对这个脚本，你可以自定义要监听的文件目录，文件类型，做到精准监听，具体的自由实现。 邪修办法!!! 有遇到同样问题，查到了原因，真正通过vite知识来解决的，欢迎在评论区留言，给看到这篇文章的同行一个解决思路