vue3+ts+vite+pinia+element plus项目使用语言国际化详解

npm install vue-i18n@9

{
    "common": {
      "login": "Login",
      "welcome": "Welcome, {name}!",
      "button": {
        "confirm": "Confirm",
        "cancel": "Cancel"
      }
    },
    "author": {
       "name": "name"
    }
}

{
    "common": {
      "login": "登录",
      "welcome": "欢迎，{name}！",
      "button": {
        "confirm": "确定",
        "cancel": "取消"
      }
    },
    "author": {
       "name": "姓名"
    }
}

import { createI18n } from 'vue-i18n'
import en from './en.json'
import zhCN from './zh-CN.json'

type MessageSchema = typeof en

const messages = {
  en,
  'zh-CN': zhCN
}

export const i18n = createI18n<[MessageSchema], 'en' | 'zh-CN'>({
  legacy: false, // 使用 Composition API 模式
  locale: 'en', // 默认语言
  fallbackLocale: 'en', // 回退语言
  globalInjection: true, // 全局注入 $t
  messages
})

// 导出类型增强
export type I18nType = typeof i18n

import { createApp } from 'vue'
import App from './App.vue'
import { i18n } from './i18n'
import { createPinia } from 'pinia'

const app = createApp(App)
const pinia = createPinia()

app.use(i18n)
app.use(pinia)
app.mount('#app')

import { I18nType } from './i18n'

declare module 'vue-i18n' {
  export interface Composer extends I18nType.global.Composer {}
}

<template>
  <select v-model="locale">
    <option value="en">English</option>
    <option value="zh-CN">中文</option>
  </select>
</template>

<script setup lang="ts">
import { useI18n } from 'vue-i18n'

const { locale } = useI18n()
</script>

import { i18n } from "@/i18n/index";
import { nextTick } from "vue";

export async function loadLocaleMessages(locale: string) {
  try {
    const messages = await import(`./locales/${locale}.json`)
    i18n.global.setLocaleMessage(locale, messages.default)
    return nextTick()
  } catch (error) {
    console.error('Failed to load locale:', error)
  }
}

// 传递的参数newLocal 为定义的语言，例如：en,zh-CN等
const switchLocale = async (newLocale: string) => {
  await loadLocaleMessages(newLocale)
  locale.value = newLocale
}

<script setup lang="ts">
import { useI18n } from 'vue-i18n'

const { t } = useI18n()

const message = t('common.welcome', { name: 'John' })
</script>

<template>
  <div>
    <h1>{{ $t('common.login') }}</h1>
    <p>{{ $t('common.welcome', { name: 'Alice' }) }}</p>
    <button>{{ $t('common.button.confirm') }}</button>
    <span>{{ $t('common.profile') }}</span>
    <span>{{ $t('author.name') }}</span>
  </div>
</template>

// stores/user.ts
import { defineStore } from 'pinia'
import { useI18n } from 'vue-i18n'

export const useUserStore = defineStore('user', () => {
  const { t } = useI18n()
  
  const login = () => {
    console.log(t('common.login'))
  }

  return { login }
})