Vite HMR tidak dapat mengesan perubahan pada komponen dalam subfolder

Question

Dalam projek Vue + Vite, saya mempunyai struktur folder ini

Masalahnya ialah vite tidak dapat mengesan perubahan (ctrl+s) dalam A.vue atau B.vue, iaitu komponen bersarang di bawah NestedFolder dalam folder komponen. Semua yang lain berfungsi dengan baik.

Vite.config.js saya kelihatan seperti ini,

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

Saya telah mencuba fungsi HMR tersuai seperti dalam dokumentasi API HMR vite dan memintanya menghantar muat semula penuh menggunakannya.

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

Saya melihat dokumentasi API HMR vite tetapi tidak tahu cara menghantar acara kemas kini ke vite apabila menggunakan fungsi hmr tersuai

Sebarang bantuan/nasihat tentang cara menyelesaikan isu ini amat dihargai.

Answer 1

Baiklah, saya selesaikan masalah. Masalahnya bukan dengan folder bersarang. Vite nampaknya mengabaikan komponen yang diimport menggunakan laluan mutlak.

Sebagai contoh Vite tidak akan mengesan perubahan pada komponen yang diimport:

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

Tetapi mengesan perubahan berbanding import:

import LoadingSpinner from '../LoadingSpinner.vue'

Saya tidak menemui sebarang tetapan yang menyelesaikan isu ini. Tetapi laluan relatif import komponen menyelesaikan masalah ini. Adakah ini masalah?