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

Vue.js: loop on <i18n> tag

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

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

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

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

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

vue-i18n-loader is just extension of vue-loader (used for processing vue files with Webpack) and works by using it's Custom blocks and Src Imports 个特征。所以解决这个问题的唯一方法是改变 Webpack 构建过程

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

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

Webpack默认支持导入json个文件（它们被导入为JS对象）

您可以按照提示使用 Webpack 的 require.context() here. Note that you can place the loadMessages() function in separate file and import it in your components but you have to pass the context in as parameter because parameters of require.context must be literals

...在 component/page 脚本块中 

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

之前 运行