如何实现国际化

为什么需要国际化

我们常在一些框架的文档右上角看到一个图标，鼠标移上去就会出现一个下拉框显示各种语言，比如 Vue 的官方文档，选择其中一个语言就会跳转到对应语言版本的网站，又或是重新刷新页面后显示对应语言，像这种效果就是国际化，让网站支持各种语言版本，这些多语言版本通常由作者维护或其他区域的开发者进行贡献完善

vue-i18n

是 vue 生态下的一个第三方插件，用于实现国际化

i18n，即 internationalization 的缩写，i 和 n 为单词首末字母，18 为中间的字母

安装依赖

pnpm add vue-i18n@9

配置插件

const i18n = createI18n({
  locale: 'ja',
  fallbackLocale: 'en',
  messages: {
    en: {
      message: {
        hello: 'hello world'
      }
    },
    ja: {
      message: {
        hello: 'こんにちは、世界'
      }
    }
  }
})

locale 为当前语言

fallbackLocale 为当前语言匹配不到对应 id 时的备用语言

messages 为对应语言的映射

注册插件

const app = createApp(Vue)
app.use(i18n)
app.mount('#app')

使用

<template>
  <el-button> {{ t('deng-lu') }} </el-button>
</template>
 
<script setup lang="ts">
  import { useI18n } from 'vue-i18n'
 
  const { t } = useI18n()
</script>

结合 vscode 插件，可以实现三种效果：

• 预览翻译
• 自动翻译
• 自动映射

安装插件后在 .vscode/settings.json 下配置

{
  "i18n-ally.localesPaths": ["src/locales"]
}

这个配置表示插件会尝试读取 src/locales 下的映射文件，实现预览和自动添加翻译到映射中，映射文件结构如下

// zh.json
{
	"deng-lu": "登录"
}
 
// en.json
{
	"deng-lu": "Login"
}

然后就可以在使用了 deng-lu 的文件中看到对应翻译的预览，想要预览对应语言，在 vscode 右下角选择

鼠标聚焦到 id 上还会显示对应 id 没有翻译的语言，你可以手动修改或配置一个翻译引擎自动翻译，更加详细的用法参考插件介绍

疑难解答

如果 src/locales 的映射文件是 ts 文件, 读取不到翻译

配置 i18n-ally.enabledParsers 数组, 加上 “ts”