关于前端:现代-Vue-工程之国际化-i18n-开发

本篇文章开始，笔者筹备开启一个小系列，称之为 古代 Vue 工程 ，本篇为第一篇 国际化 i18n 开发

咱们公司的开源工具产品 Bytebase, 目前只有英文版本。社区里也有一些小伙伴也发问到了 有没有中文版本的打算，答案当然是有了。咱们团队正打算于下次版本公布日 12 月 23 日公布国际化反对，顺利的话将全面反对中、英版本的切换。

如果做过前端国际化计划的小伙伴应该会有所理解，保护大量的文案翻译是很让人头疼的，徒手翻译更是个体力活。以笔者以往的教训来讲，无论是用文案提取工具一次性提取文案去翻译的办法，还是人工一条条去提取文案到文案资产。在简单我的项目中遇到的一些问题往往不是翻译个单词或者语句这么简略。

所以笔者总结了一些在 Vue 工程中实现国际化 i18n 的开发方法，次要是针对 Vue 我的项目而言的，所谓 古代 Vue 工程 即是借助一些好用的工具，可能是你以往没有接触过的，也可能是你正在应用的，它们是一些晋升开发效率的办法、工具等。

本期次要介绍的工具是 VSCode 插件 i18n-ally

国际化 i18n 开发

满足的条件

• VSCode
• VSCode 插件 i18n-ally
• Vue 工程集成 vue-i18n

接下来，我会通过 Vite 创立一个 Vue 3 演示工程来和大家实际以下在 Vue 工程中如何做国际化的

🌰 工程地址：

https://github.com/xiaoluoboding/vue-i18n-practice

TL;DR

• 初始化 Vue 工程
• 在 vite 中配置 vue-i18n
• 长久化用户抉择习惯
• 应用 i18n-ally 插件减速翻译流程

初始化 Vue 工程

应用 Vite 创立一个 Vue 工程，我抉择的 vue-ts 模版

yarn create vite

✔ Project name: … vue-i18n-practice
✔ Select a framework: › vue
✔ Select a variant: › vue-ts

🔗 可查看 commit: https://github.com/xiaoluobod…

在 vite 中配置 vue-i18n

须要装置三个库：

• vue-i18n@next
• @types/node
• @intlify/vite-plugin-vue-i18n

PS. 在 Vue 3 我的项目中咱们须要装置 vue-i18n 的 next 版本

yarn add vue-i18n@next -S && yarn add @types/node @intlify/vite-plugin-vue-i18n -D

配置 vite.config.ts

指定 locales 文件门路为 src/locales

import {defineConfig} from 'vite'
import vue from '@vitejs/plugin-vue'
import {resolve} from 'path'
import VueI18n from '@intlify/vite-plugin-vue-i18n'

// https://vitejs.dev/config/
export default defineConfig({
  plugins: [vue(),
    // https://github.com/intlify/vite-plugin-vue-i18n
    VueI18n({
      // define the locales files directory
      include: [resolve(__dirname, 'src/locales/**')],
    }),
  ],
})

以 Vue 插件的模式应用 i18n：

// plugins/i18n.ts
import {App} from 'vue'
import {createI18n} from 'vue-i18n'

const localPathPrefix = '../locales/'

// import i18n resources
// https://vitejs.dev/guide/features.html#glob-import
const messages = Object.fromEntries(Object.entries(import.meta.globEager('../locales/*.y(a)?ml')).map(([key, value]) => {const yaml = key.endsWith('.yaml')
      return [key.slice(localPathPrefix.length, yaml ? -5 : -4), value.default]
    }
  )
)

const install = (app: App) => {
  const i18n = createI18n({
    legacy: false,
    locale: 'en',
    globalInjection: true,
    messages,
  })

  app.use(i18n)
}

export default install

减少一个文案

<template>
    <h1>{{$t('common.home') }}</h1>
</template>

// en.yml
common:
  home: Home

// zh_cn.yml
common:
  home: 主页

最初的展现成果如下：

🔗 可查看 commit：https://github.com/xiaoluobod…

长久化用户语言选择习惯

个别用户会在进入站点抉择完语言版本后，心愿再次进入站点还是看到我抉择过的语言版本。所以咱们须要保留用户的偏好设置。这里举荐应用 localStorage 来存储用户数据，我来介绍一个比拟好用的库联合此场景，做一下用户行为长久化。

应用 @vueuse/core 库中的 useLocalStorage 实现一个相应式的配置项

设定初始值，下次进入利用时，优先读取 localStorage 中的值，代表用户抉择过的语言版本

import {useLocalStorage} from '@vueuse/core'

const storage = useLocalStorage('site_locale', 'en')
const locale = storage.value

追随按钮切换扭转语言版本，设置到 localStorage

const setLang = (lang: string) => {const storage = useLocalStorage('site_locale', '')
  storage.value = lang
}

🔗 可查看 commit：https://github.com/xiaoluobod…

应用 i18n-ally 插件减速翻译流程

感激 Anthony Fu 提供的 i18n-ally 插件，这是一款基于 VSCode 的通用的一站式翻译插件，不仅仅用于 Vue 工程中的翻译场景，能够浏览下官网文档。

传统翻译流程，可能大多数开发者也都遇到过，就是看到文案，复制粘贴到相应到 locales 文件中进行翻译，而当初咱们借助 i18n-ally 插件，咱们能够进一步的减速翻译的流程，可能就是点击几下的事儿，就搞定了文案的翻译。

装置 VScode i18n-ally 插件

VSCode 扩大中搜寻 i18n-ally 装置即可

启用 i18n-ally 插件

这里举荐应用我的项目中的 .vscode 配置项中配置

// .vscode/settings.json
{
  "i18n-ally.localesPaths": ["src/locales"],
  "i18n-ally.enabledParsers": ["yaml"],
  "i18n-ally.sourceLanguage": "en",
  "i18n-ally.displayLanguage": "zh-cn",
  "i18n-ally.keystyle": "nested"
}

再次关上 Vue 组件 HelloWorld.vue，能够看到文案产生了一些变动：

这是插件的一个个性 Inline Annotations（行内正文），将咱们之间写的形 $t('common.home') 这样的代码映射为英文的“Home”，当然咱们还能够映射为你爱好的语言，通过扭转配置项中的 "i18n-ally.sourceLanguage"的值来设定。

翻译过程的术语

• 语言文件 – /locale/en.yml | /locale/zh_CN.yml

• 命名空间 – 在 i18n-ally 中称为门路，我称之为“命名空间“(namespace)

  比方语言文件中的树形层级关系：'common.save'、'field.name' 等

• t 格式化办法 – t 办法为 vue-i18n 提供的文案格式化翻译办法，罕用格局如下：

  • Vue 模版插值中 – {{$t('common.save') }}
  • Vue 模版组件参数中 – $t('common.save')
  • Vue Script 中 – this.$t('common.save') / t('common.save')

提取文案到 YAML 语言文件

i18n-ally 反对将代码文件内的文案提取到语言文件中，反对 YAML、JSON 文件的读写操作。这个性能大大提高了咱们翻译的速度，再也不必手动去复制粘贴文案了，整个翻译流程咱们能够不必关上语言文件，插件会帮忙把文案提取写入到相应的 命名空间 下最初一行。

咱们所做的大部分工作都转化为了去命名一个 命名空间 与文案的对应关系，其余的都交给插件来解决。

大略的一个翻译流程：

1. 选取文案
2. 提取文案到语言文件，输出 命名空间
3. 替换文案为 t 办法
4. 翻译其余语言版本

🔗 可查看 commit：https://github.com/xiaoluobod…

i18n Ally 个性

• 疾速提取文案
• 主动事后翻译（可人工修改）
• 组件外部行内正文
• 审阅零碎（暂未应用）

这些个性能够让咱们疾速上手翻译文案，做到边开发边翻译的状态。

翻译技巧

这里是这在应用 vue-i18n 时遇到的一些罕用的翻译用法，简略介绍。

文案援用

假如咱们曾经积攒一些单词表了，那么有些词语或者短语是能够通过单词拼接进去的。vue-i18n 中提供了 Linked messages，提供了援用其余文案连贯语法 @:xxx，相似于援用变量，这个机制非常适合组合词语，比方翻译 App Name，咱们能够定义两个简略词 App 和 Name，拼成一个短语 App Name。

common:
  app: App
  name: Name
header:
  title: '@:common.app @:common.name'

为什么不间接去翻译 App Name 呢，写起来也并不难，其实这个还思考到人工翻译笔误、错别字的问题，多写多错是可能存在的，应用 Linked Messages 是能够防止这个问题的，并且 vue-i18n 还提供了内置的相似修饰符一样的申明办法，比方：upper、lower、capitalize 在翻译英文文案的时候很有帮忙。

🔗可查看 commit：https://github.com/xiaoluobod…

传递插值

这种形式比拟常见，相似传递一个变量，我间接拿官网的例子吧：

在模版中映射翻译的同时传递一个 msg

<p>{{$t('common.hello', { msg: 'hello'}) }}</p>

common:
  hello: '{msg} world'

最终展示为 hello world

🔗可查看 commit：https://github.com/xiaoluobod…

vue-i18n 还有一些比拟非凡的用法比方组件插值、复数复数等非凡的翻译办法，这里就不开展了。官网文档讲述的比拟具体。

最初再说一句，咱们团队所有人，对是所有人，无论前端后端，都在参加文案的翻译工作，如果你对 bytebase.com 感兴趣，或者对开源我的项目感兴趣，欢送来参加 PR 哦。

Bytebase.com 是一款聚焦在 团队合作场景下的数据库构造变更和版本治理（database schema change and version control for teams）的 开源工具 ，次要解决 研发工程师和 DBA（数据库管理员） 在变更数据库构造时的 协同问题。