任何类型的应用程序的本地化,无论是网络、移动还是桌面应用程序,都可能是乏味和烦人的。在本文中,我将向您展示如何使用 Localazy 和 vue-18n 轻松处理这些问题,从而有效地利用时间并真正享受本地化过程。

Localazy 是一个通用的本地化管理平台,通过其 CLI 支持多种框架和更广泛的格式。 Localazy 最突出的特点是主动审阅过程、社区共享翻译支持的高度准确的翻译记忆库和无干扰的翻译记忆库,以及不因很少使用的选项而臃肿的水晶般清晰的 UI。正如我稍后将展示的,它可以与 vue-i18n 无缝协作。多亏了这一点,管理翻译字符串,即使是任何人都可以贡献的开源项目(质量参差不齐),都是小菜一碟🍰。

tldr;

• 注册Localazy,

• 创建一个应用程序,以英语作为源语言并启用_使用社区翻译 (ShareTM)_ 选项,

• 选择 Vue.js 集成选项并安装 LocalazyCLI,

• 安装配置vue-i18n

• 在 root 中创建localazy.json并粘贴并修改配置

• 创建locales文件夹并在其中创建en.json。添加任何翻译键值对

• 运行localazy upload,

Localazy中的* ,添加任何语言。然后复习并接受建议的短语,

• 运行localazy download并检查新语言环境的语言环境文件夹,

• 运行应用程序npm run serve

注册和应用程序创建

首先,让我们在 Localazy 上建立一个新帐户并创建一个新应用程序。在本文中,我们将使用英语作为源语言,但您通常可以选择任何其他语言。确保启用了_使用社区翻译 (ShareTM)_ 选项。ShareTM是我提到的高度准确的翻译记忆库。多亏了它,大多数新应用程序都有多达 50% 的字符串可以自动翻译成 80 多种语言。

继续创建应用程序。然后,在集成屏幕上选择 Vue.js。我们将使用强大的 CLI 工具来管理短语的上传和下载。安装适用于 Linux、MacOS 和 Windows。请注意步骤 2 中的读取和写入键。我们很快就会需要它。

设置Vue项目

如果您不想按照此处的分步指南进行操作,可以查看完成的 repo。否则,请稍等片刻,听听。

使用vue create vue-i18n-example创建一个新的 Vue 项目(如果您没有安装 Vue CLI,请运行npm install -g @vue/cli)并使用 Vue 2 预设。安装完所有内容后,添加 vue-i18n。

npm install vue-i18n

进入全屏模式 退出全屏模式

现在是时候添加与 Localazy 的集成了。在根文件夹中创建localazy.json并粘贴以下配置。使用集成指南页面第 2 步中的写入和读取密钥。

{
    "writeKey": "your-write-key",
    "readKey": "your-read-key",

    "upload": {  
      "type": "json",
      "files": "src/assets/locales/en.json"         
    },

    "download": {
      "files": "src/assets/locales/${lang}.json"
    }
}

进入全屏模式 退出全屏模式

另外,在里面创建src/assets/locales文件夹和en.json文件。由于我们已将英语设置为源语言,因此该文件将包含我们应用程序的源短语。您可以填写任何您喜欢的键值对。我会添加这个。

{
  "hello": "Hello, my friend",
  "stay_awhile_and_listen": "Stay awhile and listen"
}

进入全屏模式 退出全屏模式

此时,应用程序已准备好由 Localazy 管理本地化。在我们上传第一组字符串之前,让我们用 vue-i18n 准备一个测试场景,让它从我们的盘子里拿出来。

首先修改main.js。

import Vue from 'vue'
import App from './App.vue'
import VueI18n from "vue-i18n";
import en from "../src/assets/locales/en.json";

const messages = {
    en,
}

Vue.use(VueI18n);
const i18n = new VueI18n({
    locale: 'en',
    messages
})


Vue.config.productionTip = false

new Vue({
  i18n,
  render: h => h(App),
}).$mount('#app')

进入全屏模式 退出全屏模式

然后是App.vue

<template>
  <div id="app">
    <h1>{{$t('hello')}}</h1>
    <h2>{{$t('stay_awhile_and_listen')}}</h2>
  </div>
</template>

<script>

export default {
  name: 'App',
}
</script>

<style>
#app {
  font-family: Avenir, Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #2c3e50;
  margin-top: 60px;
}
</style>

进入全屏模式 退出全屏模式

当您运行npm run serve时,您应该会看到两个英文短语。到目前为止没有什么花哨的。

上传和下载短语

让我们将英文文件上传到 Localazy。从根文件夹中,运行以下命令

localazy upload -s

进入全屏模式 退出全屏模式

-s参数代表模拟。最好在不上传任何内容的情况下测试配置,以确保不会发生任何意外情况(例如某些键值对不正确匹配并相互覆盖)。根据 CLI 版本,输出应该是这样的

Localazy CLI, v1.1.9
Advanced file uploader/downloader for the Localazy translation platform.

Read more information at https://localazy.com/docs/cli

Uploading...
  - deprecate missing: false
  - import as new: false
  - app version: 0
  - groups: (default only)
  - folder: .

Processing files...

./src/assets/locales/en.json
  (file=file.json, lang=inherited, type=json)

Verifying...

Validating...

Done.

进入全屏模式 退出全屏模式

一切顺利,我们的英文文件匹配。这次让我们来实实在在的上传吧。

localazy upload

进入全屏模式 退出全屏模式

刷新您的应用页面,您应该会在列表中看到英语。打开_添加语言_选项卡,您会在其中找到几种语言,其中包含有关自动翻译百分比的信息。您可能会看到 50 % 或 100 %。与 ShareTM 的自动匹配一直在改进,多亏了这篇文章,您可能会自动翻译所有短语。多么酷啊? 🙂

[](https://res.cloudinary.com/practicaldev/image/fetch/s--l4_NdZcr--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_880/https://directus.localazy。 com/_/assets/add_language_screen.png)

一种或另一种方式,查找德语并将其添加到您的应用程序中。你会看到有一个评论按钮。每次 ShareTM 提供翻译建议时,都会获得候选状态。这意味着它将准备好进行审核,任何审核者都可以批准或拒绝。继续并批准建议的短语。

[](https://res.cloudinary.com/practicaldev/image/fetch/s--AUBKvDdx--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_880/https://directus.localazy。 com/_/assets/review_for_sharetm.png)

如果 ShareTM 未翻译 100 % 的短语,请返回语言列表并注意查看按钮现在显示为翻译。 Localazy 认识到没有什么需要复习但仍有一些内容需要翻译,因此它一键为您提供下一个最有可能的操作。翻译另一个短语(您可以使用翻译页面上的建议短语)。这次您不需要经过审核流程,因为您是默认所有者的可信赖翻译,因此翻译会立即获得批准。

是时候回到 Vue 项目了。

localazy download

进入全屏模式 退出全屏模式

使用此命令,您将下载所有新接受的短语和新添加的语言。在 locales 文件夹中,我们可以看到有新的de.json。

最后要做的是更新main.js并添加德语语言环境资源文件。

import Vue from 'vue'
import App from './App.vue'
import VueI18n from "vue-i18n";
import en from "../src/assets/locales/en.json";
import de from "../src/assets/locales/de.json";


const messages = {
    en,
    de
}

Vue.use(VueI18n);
const i18n = new VueI18n({
    locale: 'de',
    messages
})


Vue.config.productionTip = false

new Vue({
  i18n,
  render: h => h(App),
}).$mount('#app')

进入全屏模式 退出全屏模式

现在,当您再次运行该应用程序时,您会看到这些短语已正确翻译成德语。

结束语

我希望你喜欢这个使用 vue-i18n 对 Localazy 的简短介绍。如果您想更接近我们,请加入我们Discord。

---

本文首发于Localazy