Vite HMR kann keine Änderungen an Komponenten in Unterordnern erkennen

Question

Im Vue + Vite-Projekt habe ich diese Ordnerstruktur

Das Problem besteht darin, dass Vite keine Änderungen (Strg+S) in A.vue oder B.vue erkennen kann, d. h. Komponenten, die unter NestedFolder im Komponentenordner verschachtelt sind. Alles andere funktioniert gut.

Mein vite.config.js sieht so aus,

import { fileURLToPath, URL } from 'node:url'

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

// https://vitejs.dev/config/
export default defineConfig({
  plugins: [
    vue()
  ],
  resolve: {
    alias: {
      '@': fileURLToPath(new URL('./src', import.meta.url)),
      '@public': fileURLToPath(new URL('./public', import.meta.url))
    }
  },
  server: {
    proxy: {
      '/api': {
        target: 'XXX',
        changeOrigin: true,
        secure: false,      
        ws: true,
      }
    }
  }
})

Ich habe die benutzerdefinierte HMR-Funktion gemäß der Vite-HMR-API-Dokumentation ausprobiert und damit einen vollständigen Neuladevorgang senden lassen.

...
plugins: [
    vue(),
    {
      name: 'custom-hmr',
      enforce: 'post',
      // HMR
      handleHotUpdate({ file, server }) {
        if (file.endsWith('.vue')) {
          console.log('reloading json file...');
  
          server.ws.send({
            type: 'reload',          
            path: '*'
          });
        }
      },
    }
  ], ...

Ich habe mir die HMR-API-Dokumentation von Vite angesehen, weiß aber nicht, wie man Aktualisierungsereignisse an Vite sendet, wenn eine benutzerdefinierte HMR-Funktion verwendet wird

Jede Hilfe/Ratschlag zur Lösung dieses Problems wäre sehr dankbar.

Answer 1

好的，我解决了这个问题。问题不在于嵌套文件夹。 Vite似乎会忽略使用绝对路径导入的组件。

例如Vite 不会检测导入组件的更改：

import Dropdown from '@/components/GlobalDropdown.vue'
//@ resolves to /src

但检测相对导入的变化：

import LoadingSpinner from '../LoadingSpinner.vue'

我找不到任何可以解决此问题的设置。但是组件导入的相对路径解决了这个问题。这是一个问题吗？