vue3国际化适配

最近公司接手了一个香港地区的项目，由于语言的不同涉及到了国际化，于是花时间研究了一下，配置也是很简单，简单的几步就可以配置好了

什么是国际化？

是指使软件应用能够适应不同语言和地区文化差异的过程。其主要目标是让应用能够为不同语言的用户提供本地化的内容和体验，特别是在做一些港澳地区和海外项目的时候，进行国际化适配是必不可少的。

为什么叫i18n？

"i18n" 是 "internationalization"（国际化）的缩写形式

"i18n" 是一个惯用的简写形式，其中 "i" 代表单词的开头字母，"n" 代表单词的结尾字母，而 "18" 则表示在这两个字母之间的18个字母

主要目的是为了简化表达和方便使用

类似的缩写还有 "l10n" 代表 "localization"（本地化），"a11y" 代表 "accessibility"（无障碍设计）

如何进行国际化适配？

安装插件

bash 复制代码

pnpm i vue-i18n

配置 vue-i18n

创建一个用于配置国际化的文件，导出配置的国际化实例

在 src/i18n/index.js

js 复制代码

import { createI18n } from 'vue-i18n'

import en from './locales/en-US'
import cn from './locales/zh-CN'
import tw from './locales/zh-TW'

const messages = {
  'en-US': en,
  'zh-CN': cn,
  'zh-TW': tw,
}

// 创建 i18n 实例
const i18n = createI18n({
  locale: 'zh-CN', // 默认语言
  legacy: false, //  启用 Composition API 语法
  messages, // 语言包，也就是你要翻译的内容
  globalInjection: true, // 全局注入 $t
})

export const t = i18n.global.t // 全局导出 t 方法，简化和方便使用，减少使用的心智负担

export function useLocale(){
  return computed({
      get(){
          return i18n.global.locale.value
      },
      set(locale){
          i18n.global.locale.value = locale
      }
  })
}

export default i18n

创建语言包

js 复制代码

src/i18n/locales/en-US.js
export default {
  登录: 'login',
  注册: 'register',
  用户名: 'username',
  密码: 'password',
}

js 复制代码

src/i18n/locales/zh-CN.js
export default {
  登录: '登录',
  注册: '注册',
  用户名: '用户名',
  密码: '密码',
}

js 复制代码

src/i18n/locales/en-TW.js
export default {
  登录: '登入',
  注册: '註冊',
  用户名: '用户名',
  密码: '密碼',
}

为什么上面使用了缓存？

因为切换语言是依靠 vue-i18n 提供的一个全局变量 locale ，切换locale来使用不同的语言包，当页面刷新相当于又重置了默认值，所以使用缓存来解决，当然解决方法不止一种，也可以使用 watch 来解决

目前还只是页面上所有文字的切换显示多语言，一般在开发的时候会使用到组件库配合开发，还要配置组件库的国际化适配下面我以 naive-ui 为例，其他组件库同理

vue 复制代码

app.vue
<template>
  <n-config-provider :locale="naiveLocale">
    <router-view />
  </n-config-provider>
</template>
<!--
naiveLocale 为全局提供给 naive ui 的全局语言，使用计算属性动态计算
-->
<script setup>
  import { computed } from 'vue'
  import { useI18n } from 'vue-i18n'
  import { zhCN, enUS, zhTW } from 'naive-ui' // 引入 naive ui 的语言包


const { locale } = useI18n()

// 定义一个映射表，将语言代码映射到 Naive UI 的本地化配置对象
const naiveLocaleMapping = {
  'en-US': enUS, // 英语设置
  'zh-CN': zhCN, // 简体中文设置
  'zh-TW': zhTW  // 繁体中文设置
}

const naiveLocale = computed(() => naiveLocaleMapping[locale.value])
// 这里的意思是，读取当前的 locale 使用的语言环境值，然后去 naiveLocales 中找到对应的语言包，赋值给 naiveLocale

</script>

首先导入 naive-ui 的语言包
使用 locale 获取当前的语言环境，去映射表中找到对应的语言赋值给 naiveLocale
最后在 n-config-provider 中使用 naiveLocale

这样，当切换语言的时候，组件库的语言也会跟着切换

注意：组件库的语言包需要和 vue-i18n 的语言包一一对应，不然切换语言的时候组件库的语言不会跟着切换

最终实现效果