Vite 5：监听 `dist` 文件夹更改，解决服务器无法重新加载的问题

vue.js

2024-04-23 16:17:21

Vite 5 中监听 dist 文件夹更改以重新加载服务器

在升级 Vite 到版本 5 后，许多用户遇到了一个问题，即服务器无法在 dist 文件夹中的文件更改后重新加载。这使得在开发自定义 Web 组件时，每次更新 dist 文件夹内的构建文件后，都需要手动刷新浏览器才能看到更改。

问题的原因

Vite 5 中的默认行为是忽略 dist 文件夹中的更改。这是因为 dist 文件夹被认为是构建输出，通常在构建完成后不再需要监听。

解决方案

有几种方法可以解决此问题：

1. 安装 Vite 重新启动插件

Vite 重新启动插件是一个第三方插件，它可以在文件更改后自动重新启动 Vite 开发服务器。

安装：

npm install --save-dev vite-plugin-restart

配置：

import { defineConfig } from 'vite';
import vue from '@vitejs/plugin-vue';
import restart from 'vite-plugin-restart';

export default defineConfig(({ mode }) => {
  return {
    plugins: [
      vue(),
      restart({
        restartOnUpdate: true,
      }),
    ],
    ...
  }
});

2. 使用轮询模式

轮询模式是一种替代方案，它可以强制 Vite 开发服务器定期检查文件是否有更改。

配置：

import { defineConfig } from 'vite';
import vue from '@vitejs/plugin-vue';

export default defineConfig(({ mode }) => {
  return {
    plugins: [
      vue(),
    ],
    server: {
      watch: {
        usePolling: true,
        interval: 1000, // 每隔 1 秒轮询一次
      },
    },
    ...
  }
});