国际化

国际化

介绍

在 Vue3 项目中实现国际化 (i18n) 通常使用vue-i18n库，它提供了完整的国际化解决方案，支持组件内本地化、动态语言切换、复数形式等高级功能。

文件：package.json

"dependencies": {
    ...
	"vue-i18n": "9.10.2",
    ...
}

配置默认语言

文件：src\store\modules\locale.ts，配置 currentLocale 为其他语言。

export const useLocaleStore = defineStore('locales', {
  state: (): LocaleState => {
    return {
      currentLocale: {
        lang: wsCache.get(CACHE_KEY.LANG) || 'zh-CN',
        elLocale: elLocaleMap[wsCache.get(CACHE_KEY.LANG) || 'zh-CN']
      },
      // 多语言
      localeMap: [
        {
          lang: 'zh-CN',
          name: '简体中文'
        },
        {
          lang: 'en',
          name: 'English'
        }
      ]
    }
  },
  getters: {
    getCurrentLocale(): LocaleDropdownType {
      return this.currentLocale
    },
    getLocaleMap(): LocaleDropdownType[] {
      return this.localeMap
    }
  },
  actions: {
    setCurrentLocale(localeMap: LocaleDropdownType) {
      // this.locale = Object.assign(this.locale, localeMap)
      this.currentLocale.lang = localeMap?.lang
      this.currentLocale.elLocale = elLocaleMap[localeMap?.lang]
      wsCache.set(CACHE_KEY.LANG, localeMap?.lang)
    }
  }
})

语言文件

目前项目中的语言都是没有拆分，目录：src\locales

locales/
|-- en.ts
`-- zh-CN.ts

语言文件导入逻辑说明

• 在 src/plugins/vueI18n/index.ts 内可以看到，这会导入 src/locales 文件语言包。

const defaultLocal = await import(`../../locales/${locale.lang}.ts`)

使用示例

引入项目自带的 useI18n，注意不要引入 vue-i18n 的 useI18n

<template>
	<div key="2" class="text-3xl text-white">{{ t('login.welcome') }}</div>
    <div key="3" class="mt-5 text-14px font-normal text-white">
      {{ t('login.message') }}
    </div>
</template>
<script lang="ts" setup>
    const { t } = useI18n()
</script>

文件：src\types\auto-imports.d.ts ，配置了自动引入

export {}
declare global {
	...
    const useI18n: typeof import('@/hooks/web/useI18n')['useI18n']
    ...
}

切换语言：切换语言需要使用 src/hooks/web/useLocale.ts

import { useLocale } from '@/hooks/web/useLocale'
const { changeLocale } = useLocale()

changeLocale('en')