在 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-loader，它带来了自动 yaml 支持和 i18n 块。

Answer 1

您可以将 Nuxt 配置为使用 yaml-loader 作为您的语言环境：

// 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

这将允许您在 Vue 组件中加载 nuxt-i18n / vue-i18n. However, it will also clash with the custom i18n block (<i18n>) 的 yaml 文件（前提是您使用 SFC 模式）。

为防止这种情况发生，您可以将上述规则更改为仅适用于 locales/ 目录（或您想要的任何其他目录）中的 yaml 文件：

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

现在您可以使用 locales/ 目录中的 i18n 块和 yaml 文件。

在 nuxt-i18n 中加载 yaml 文件

Load yaml files in nuxt-i18n

webpack

nuxt.js

nuxt-i18n