首页 > 网络编程 > JavaScript > javascript类库 > vue.js > vue3+ts+vite+pinia+element plus使用语言国际化

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

2025-11-22 15:15:08 作者：活宝小娜

文章介绍了如何在Vue 3 + TypeScript + Vite + Pinia + Element Plus项目中实现语言国际化,主要步骤包括安装vue-i18n、创建语言文件、创建i18n实例、全局引入、类型声明（可选）、创建语言切换组件、动态加载语言文件以及在组件和PiniaStore中使用国际化

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

1、安装vue-i18n@9

npm install vue-i18n@9

2、创建语言文件en.json和zh-CN.json，路径在src/i18n/

en.json和zh-CN.json文件内容要一致，以便在切换语言时生效，需要传入的内容可用{}

en.json内容：

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

zh-CN.json内容

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

3、创建 i18n 实例

src/i18n/index.ts

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

4、全局引入，修改 main.ts

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')

5、类型声明（可选）

src/shims-vue-i18n.d.ts

import { I18nType } from './i18n'

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

6、创建语言切换组件

路径：src/components/LangSwitcher/index.vue

<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>

7、创建动态加载语言文件

路径： src/i18n/loader.ts

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
}

8、在组件中使用国际化

8.1组合式 API 写法

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

const { t } = useI18n()

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

8.2模板中使用：

<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>

8.3在 Pinia Store 中使用

// 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 }
})

总结

以上为个人经验，希望能给大家一个参考，也希望大家多多支持脚本之家。