在 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

这将允许您为 nuxt-i18n / vue-i18n 加载 yaml 文件。但是，它也会与您的 Vue 组件中的自定义 i18n block (<i18n>) 发生冲突（假设您使用 SFC 模式）。

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

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

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