在nuxt-i18n中加载yaml文件

Question

如何使用nuxt-i18n从Nuxt 2中的yaml文件加载区域设置？

我已经将路径添加到我的nuxt.config.js中

{
  i18n: {
    vueI18nLoader: true,
    langDir: '~/locales/',
    locales: [
      { code: 'en', iso: 'en-GB', file: 'en.yaml', dir: 'ltr' },
      { code: 'de', iso: 'de-DE', file: 'de.yaml', dir: 'ltr' },
    ],
    defaultLocale: 'en',
  }
}

我启用了vue- i18n -加载器，它提供了自动yaml支持和i18n块。

Answer 1

您可以将Nuxt配置为为您的地区使用yaml装载机：

// nuxt.config.js
{
  // ...
  build: {
    // ...
    extend(config) {
      config.module.rules.push({
        test: /\.ya?ml$/,
        type: 'json',
        use: 'yaml-loader'
      })
    }
  }
}

了解有关在Nuxt中扩展Webpack配置的更多信息，请参见：https://nuxtjs.org/docs/configuration-glossary/configuration-build#extend

这将允许您为nuxt-i18n / vue-i18n加载yaml文件。然而，它也将与您的Vue组件中的自定义i18n块 (<i18n>)冲突(假设您使用证监会模式)。

为了防止这种情况，您可以将上述规则更改为仅适用于locales/目录(或任何其他您希望的目录)中的yaml文件：

// nuxt.config.js
{
  // ...
  build: {
    // ...
    extend(config) {
      config.module.rules.push({
        test: /locales\/.*\.ya?ml$/, // <---
        type: 'json',
        use: 'yaml-loader'
      })
    }
  }
}

现在，您可以同时使用i18n块以及来自locales/目录的yaml文件。