从 .vue 文件中提取字符串以进行国际化的工具

Question

我有一个 Vue.js 2.x Web 应用程序，我希望通过从 .vue 文件中提取所有字符串来将其国际化。
我的目标是识别可能需要翻译的字符串，即使可能有一些字符串不需要翻译。 是否有任何现有工具可用于从 .vue 文件中提取字符串？

如果没有任何专用工具用于此目的，我正在考虑使用 vue-template-compiler 实现我自己的解决方案。

Answer 1

如果您使用 VS Code，i18n Ally 插件效果很好：

https://marketplace.visualstudio.com/items?itemName=Lokalise.i18n-ally

此插件可以检测可能需要翻译的硬编码字符串。

Answer 2

建议为此使用一些国际化框架。一个很好的例子是 Lingui - 用于 JavaScript 项目内部化 (i18n) 的 JavaScript 库，包括 React、Vue、Node.js 等。

Lingui是一个简单但功能强大的国际化框架。他们最近发布了一个 Vue.js Extractor，它提供了一个处理 Vue.js 文件的自定义提取器。

消息提取是国际化过程中必不可少的一步。它涉及分析您的代码并提取其中定义的所有消息，以便您的消息目录始终与源代码保持同步。请访问消息提取文章了解其在临桂中的工作原理。

使用 Lingui 本地化后 vue 文件的外观示例：

<script setup lang="ts">
import { i18n } from "@lingui/core"
i18n._("Setup message")
let x: string | number = 1
</script>

<script lang="ts">
import { defineComponent } from "vue"
import { i18n } from "@lingui/core"

export default defineComponent({
  data() {
    return {
      i18n,
      scriptString: i18n.t("Script message"),
    }
  },
})
</script>

<template>
  {{ (x as number).toFixed(2) }}
  {{ i18n.t({ id: "custom.id", message: "My message" }) }}
  {{
    i18n.t({
        message: "My descriptor message",
        id: "my.message",
        comment: "Message comment",
      })
  }}
  {{ i18n._("id used as message") }}
  {{ i18n.t({ id: "My message without ID and context" }) }}
</template>

免责声明：我隶属临桂项目。