nuxt 设置i18n后多语言文件不会动态更新-编程知识

nuxt 设置i18n后多语言文件不会动态更新

昨天遇到的一个问题，然后研究了一整天，今天才得到解决

nuxt 设置i18n多语言时多语言文件不会动态更新

我的原始代码如下：

{modules: ['@nuxtjs/i18n',],i18n: {locales: [{code: 'en',iso: 'en-US',name: 'English',file: 'en.js'},// {//   code: 'zh',//   iso: 'zh-CN',//   name: '简体中文',//   file: 'zh.json'// }],defaultLocale: 'en',vueI18n: {fallbackLocale: 'en',messages: {en: require('./locales/en.js'),// zh: require('./locales/zh.js')}},parsePages: false,disableBuildMiddleware: true // 禁用中间件构建},
}

咋看之下，一点毛病也没有，官方文档就是这么配的

但是配完之后当我改多语言文件时就出现问题了，无论我怎么改，终端都不会HMR，怎么回事？

原因是因为多语言文件是用require导入的，所以webpack不会监听本文件

nuxt.config 是nuxt 配置级别的文件，不由 webpack 处理，因此只会执行一次并且不会监视其中的导入引用。

解决方案：

然后我就反复的看这个官方文档，注意到了这个参数：
在这里插入图片描述
加上lazy之后的代码：

  i18n: {lazy: true,langDir: 'locales/',locales: [{code: 'en',iso: 'en-US',name: 'English',file: 'en.js'},// {//   code: 'zh',//   iso: 'zh-CN',//   name: '简体中文',//   file: 'zh.json'// }],defaultLocale: 'en',parsePages: false,disableBuildMiddleware: true // 禁用中间件构建},