javascript - Vite HMR doesn't detect changes to components nested under sub folders - Stack Overflow

admin管理员组

文章数量:1278793

In a Vue + Vite project, I have folder structure like this

The problem is vite doesn't detect changes (ctrl+s) in A.vue or B.vue i.e., ponents nested under NestedFolder in ponents folder. Everywhere else works fine.

My vite.config.js looks like this,

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

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

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

I've tried custom HMR functions as per the vite HMR API docs, got it to send full reload using this.

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

I looked through vite's HMR API docs but couldn't figure out how to send update event to vite when using custom hmr function

Any help/suggestion on how to solve this would be greatly appreciated.

In a Vue + Vite project, I have folder structure like this

The problem is vite doesn't detect changes (ctrl+s) in A.vue or B.vue i.e., ponents nested under NestedFolder in ponents folder. Everywhere else works fine.

My vite.config.js looks like this,

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

I've tried custom HMR functions as per the vite HMR API docs, got it to send full reload using this.

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

I looked through vite's HMR API docs but couldn't figure out how to send update event to vite when using custom hmr function

Any help/suggestion on how to solve this would be greatly appreciated.

• javascript
• vue.js
• vite

Share Improve this question Follow edited Aug 26, 2022 at 20:19 Moorish Awan asked Aug 10, 2022 at 22:00 Moorish AwanMoorish Awan 32333 silver badges1212 bronze badges 5

• I cannot reproduce. Can you share a link to a reproduction of the problem? – tony19 Commented Aug 19, 2022 at 23:59
• Which version of Vite are you using in your project? I suspect updating to the latest stable version may resolve your issue. You may need to refactor your configuration to the latest too. – JStanton Commented Aug 22, 2022 at 8:08
• Cannot reproduce, too. Please provide more information. – Kurt Commented Aug 24, 2022 at 4:52
• @tony19 I tried to reproduce the problem on stackblitz and codesandbox but couldn't. It's helpful to know that this is not default behavior. I assumed I needed to configure it for nested folders. The project is really huge. Maybe some other package is interfering with vite configuation. Thank you. – Moorish Awan Commented Aug 24, 2022 at 14:29
• @JStanton I'm using v3.0.1 – Moorish Awan Commented Aug 24, 2022 at 14:31

Add a ment  | 

2 Answers 2

Sorted by: Reset to default 6

Ok I solved the problem. The problem is not with nested folders. Vite seems to ignore ponents that are imported with absolute path.

E.g. Vite doesn't detect changes in ponents imported as:

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

but detects changes in imports that are relative:

import LoadingSpinner from '../LoadingSpinner.vue'

I couldn't find any setting that addresses this. But having relative paths for ponent imports solved the issue. Is this an issue?

I think issue is that you made a caseSensitive typo, please check that your path is correct, I had similar issue and this was one letter typed in uppercase.

本文标签： javascriptVite HMR doesn39t detect changes to components nested under sub foldersStack Overflow