Vite HMR 不会检测嵌套在子文件夹下的组件的更改答案

【问题标题】：Vite HMR doesn't detect changes to components nested under sub foldersVite HMR 不会检测嵌套在子文件夹下的组件的更改
【发布时间】：2023-01-16 18:50:32
【问题描述】：

在 Vue + Vite 项目中，我有这样的文件夹结构

问题是 vite 没有检测到 A.vue 或 B.vue 中的更改 (ctrl+s)，即嵌套在组件文件夹中 NestedFolder 下的组件。其他地方工作正常。

我的 vite.config.js 看起来像这样，

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

我已经根据 vite HMR API 文档尝试了自定义 HMR 函数，让它使用它发送完整的重新加载。

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

我查看了 vite 的 HMR API 文档，但无法弄清楚如何在使用自定义 hmr 函数时将更新事件发送到 vite

任何有关如何解决此问题的帮助/建议将不胜感激。

【问题讨论】：

我cannot reproduce。你能分享一个问题重现的链接吗？
您在项目中使用的是哪个版本的 Vite？我怀疑更新到最新的稳定版本可能会解决您的问题。您可能还需要将您的配置重构为最新的。
也无法重现。请提供更多信息。
@tony19 我试图在 stackblitz 和 codesandbox 上重现该问题，但没有成功。知道这不是默认行为会很有帮助。我假设我需要为嵌套文件夹配置它。工程真的很大。也许其他一些包干扰了 vite 配置。谢谢你。
@JStanton 我正在使用 v3.0.1

标签： javascript vue.js vite

【解决方案1】：

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

例如。 Vite 不会检测导入组件的变化：

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

但检测到相对的进口变化：

import LoadingSpinner from '../LoadingSpinner.vue'

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

【讨论】：

【解决方案2】：

我认为问题是你犯了一个区分大小写的错字，请检查你的路径是否正确，我有类似的问题，这是一个大写字母。

【讨论】：

您的答案可以通过其他支持信息得到改进。请edit 添加更多详细信息，例如引用或文档，以便其他人可以确认您的答案是正确的。你可以找到更多关于如何写出好的答案的信息in the help center。

【解决方案3】：

是的，你是对的，Ilya，我发现了我的输入类型，Vite 又开始表现了。谢谢你！丹尼尔

【讨论】：

请不要添加谢谢作为答案。它们实际上并没有提供问题的答案，并且可能被未来的访问者视为噪音。一旦你earn足够reputation，你将获得你喜欢的upvote answers的特权。这样问题的未来访问者将看到对该答案的更高投票计数，并且回答者也将获得声誉点数奖励。参见Why is voting important。