我有一个使用 Vite 配置的 React 项目。
热重载效果很好，但我使用react-i18next对于多语言支持，这是我的结构：
public
-> en
-> translation.json
-> ru
-> translation.json
当我改变translation.json文件，Vite不看，必须刷新页面才能看到变化。
有没有办法让Vite查看该目录下的所有文件public目录？
我修改了 Flydev 的答案，以便它可以热重新加载依赖于 i18n 的组件，而无需重新加载整个页面。 （目前在打字稿项目中使用）
import { PluginOption } from "vite";
export default function I18nHotReload(): PluginOption {
return {
name: 'i18n-hot-reload',
handleHotUpdate({ file, server }) {
if (file.includes('locales') && file.endsWith('.json')) {
console.log('Locale file updated')
server.ws.send({
type: "custom",
event: "locales-update",
});
}
},
}
}
然后将其添加到vite的插件中：
plugins: [
...,
i18nHotReload(),
]
然后在代码可以到达的任何地方添加侦听器（我在 i18n 初始配置文件中使用它）
if (import.meta.hot) {
import.meta.hot.on('locales-update', () => {
i18n.reloadResources().then(() => {
i18n.changeLanguage(i18n.language)
})
})
}
i18n.reloadResources()单独不会触发翻译热重载
本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系:hwhale#tublm.com(使用前将#替换为@)
