javascript - 如何查看 Vite 项目中的公共(public)目录进行热重载？

Question

我有一个用 Vite 配置的 react 项目。
热重载效果很好，但我使用 react-i18next对于多语言支持，这是我的结构:

public
  -> en
    -> translation.json
  -> ru
    -> translation.json

当我更改 translation.json文件，Vite 不看，我必须刷新页面才能看到更改。
有没有办法告诉 Vite 查看 public 中的所有文件目录？

Answer 1

您可以使用插件来实现。
我的第一个答案出错了，应该是 full-reload事件而不是 update事件

export default function CustomHmr() {
    return {
      name: 'custom-hmr',
      enforce: 'post',
      // HMR
      handleHotUpdate({ file, server }) {
        if (file.endsWith('.json')) {
          console.log('reloading json file...');
  
          server.ws.send({
            type: 'full-reload',          
            path: '*'
          });
        }
      },
    }
}

然后在 vite.config.js 中添加插件:

{
  plugins: [
    CustomHmr()   <---  custom plugin
  ]
}

💡 我在 Github 上为你做了一个 repo，并提供了一个工作示例:

https://github.com/flydev-fr/vite-react-i18next

结果说明