Vue.js：在 <i18n> 标签上循环

Question

我在静态模式下使用 Nuxt.js 来生成我的网站，最近添加了一个 i18n 模块(nuxt-i18n) 以支持多语言能力。 现在我想在我的.vue 文件中使用自定义块来定义翻译，因为它们是特定于页面的翻译：

<i18n src="./en.json"></i18n>

当我有 10 多种语言时，它会很快变得烦人。 我的问题是是否有在循环中生成这些标签，例如 v-for 在 $i18.locales 变量上循环？

文档：nuxt-i18、vue-i18n-loader

Answer 1

有一种方法，但绝对不能使用 v-for，因为它是一个 Vue 构造，只能在 Vue 模板中使用（<template> Vue 模板编译器处理的 SFC 块）

vue-i18n-loader 只是vue-loader 的扩展（用于使用Webpack 处理vue 文件）并使用它的Custom blocks 和Src Imports 功能工作。所以解决这个问题的唯一方法是改变 Webpack 构建过程

下面有两种可能的解决方案。在这两种情况下，这都会为您的项目增加一些复杂性，因此也许更好的解决方案是将所有翻译合并到一个 json 文件中...

选项 1 - 用自定义解决方案替换 vue-i18n-loader

Webpack默认支持导入json文件（作为JS对象导入）

您可以使用 Webpack 的 require.context() 提示 here。请注意，您可以将loadMessages() 函数放在单独的文件中并将其导入组件中，但您必须将上下文作为参数传递，因为require.context 的参数must be literals

...在组件/页面脚本块中

import loadMessages from `@/utils/loadMessages.js`

const messages = loadMessages(require.context('.', false, /\.json$/i))

export default {
  i18n: {
    messages
  }
}

可以使用webpack-import-glob-loader 创建类似的解决方案，但它需要更改 Webpacks 配置并将导入的“模块”（JS 对象）合并到单个 messages 对象中...

选项 2 - 编写自定义 Webpack 加载器

编写自己的加载器应该不会太难，它会将类似<i18n src="./*.json"> 的内容扩展为多个<i18n> 部分。还需要更改 Webpack 配置。而且你的加载器必须在vue-loader...之前运行...