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 // 禁用中间件构建
  },

非常丝滑！！

具体配置教程大家可以参考官网https://i18n.nuxtjs.org/