Vite HMR ne peut pas détecter les modifications apportées aux composants dans les sous-dossiers

Question

Dans le projet Vue + Vite, j'ai cette structure de dossiers

Le problème est que vite ne peut pas détecter les changements (ctrl+s) dans A.vue ou B.vue, c'est-à-dire les composants imbriqués sous NestedFolder dans le dossier des composants. Tout le reste fonctionne bien.

Mon vite.config.js ressemble à ceci,

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,
      }
    }
  }
})

J'ai essayé la fonction HMR personnalisée selon la documentation de l'API vite HMR et je lui ai demandé d'envoyer un rechargement complet en l'utilisant.

...
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: '*'
          });
        }
      },
    }
  ], ...

J'ai consulté la documentation de l'API HMR de vite mais je ne sais pas comment envoyer des événements de mise à jour à vite lors de l'utilisation d'une fonction hmr personnalisée

Toute aide/conseil sur la façon de résoudre ce problème serait grandement apprécié.

Answer 1

D'accord, j'ai résolu le problème. Le problème ne vient pas des dossiers imbriqués. Vite semble ignorer les composants importés à l'aide de chemins absolus.

Par exemple, Vite ne détectera pas les modifications apportées aux composants importés :

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

Mais détecter les changements relatifs aux importations :

import LoadingSpinner from '../LoadingSpinner.vue'

Je ne trouve aucun paramètre permettant de résoudre ce problème. Mais le chemin relatif de l’importation du composant résout ce problème. Est-ce un problème?