从Vite 4.4升级到5后，开发服务器无法检测dist文件变更重载

问题背景 #

基于Vue 3的Vite自定义Web组件项目，开发阶段用npx vite build --watch监听.ce.vue文件变更并重建dist目录，此功能正常。但升级到Vite 5后，npx vite启动的开发服务器无法再检测dist目录的变更，导致index.html无法自动加载最新bundle。已尝试开启usePolling和vite-plugin-restart插件，但问题未解决。

解决方案 #

1. 调整服务器监听配置，明确包含dist目录 #

Vite 5 默认会忽略对输出目录（如dist）的监听，需要显式配置让服务器监听dist目录的文件变化：

修改vite.config.js中的server.watch配置，移除对dist目录的忽略规则：

export default defineConfig(({ mode }) => {
  return {
    // ... 其他原有配置
    server: {
      port: 3005,
      watch: {
        usePolling: true,
        // 取消对dist目录的忽略，让服务器监听其变化
        ignored: ['!**/dist/**']
      },
    },
    // ... 其他原有配置
  };
});

2. 正确配置 vite-plugin-restart 插件 #

如果使用vite-plugin-restart，需要明确指定监听dist目录下的bundle文件，而非默认配置：

• 先确保安装插件：npm install vite-plugin-restart --save-dev
• 在vite.config.js中添加插件并配置监听路径：

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

export default defineConfig(({ mode }) => {
  return {
    // ... 其他原有配置
    plugins: [
      vue(),
      viteVueCESubStyle(),
      restart({
        // 匹配你的构建产物命名规则，监听dist下的bundle文件
        restart: ['dist/evalufy-sdk-*.js']
      })
    ],
    // ... 其他原有配置
  };
});

3. 验证生效 #

修改配置后重启相关进程：

1. 启动构建监听：npx vite build --watch
2. 启动开发服务器：npx vite
3. 修改.ce.vue文件，等待dist目录更新后，开发服务器应自动重启并加载最新bundle。

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