vue3中英文转换方案（使用 Vue I18n）

一、安装依赖

 npm install vue-i18n@next ant-design-vue 

二、配置Vue I18n

1、创建 i18n 配置文件 src/i18n/index.js 

import { createI18n } from 'vue-i18n'
import antdZhCN from 'ant-design-vue/es/locale/zh_CN'
import antdEnUS from 'ant-design-vue/es/locale/en_US'
import messages from './locales'

// 获取浏览器语言
const getBrowserLocale = () => {
  const locale = localStorage.getItem('locale') || navigator.language || 'zh-CN'
  return locale.includes('zh') ? 'zh-CN' : 'en-US'
}

const i18n = createI18n({
  legacy: false, // 使用 Composition API 模式
  globalInjection: true, // 全局注入 $t 方法
  locale: getBrowserLocale(),
  fallbackLocale: 'en-US',
  messages
})

// Ant Design Vue 语言配置
export const antdLocales = {
  'zh-CN': antdZhCN,
  'en-US': antdEnUS
}

export default i18n

2、创建语言包文件

 src/i18n/locales/zh-CN.js 

export default {
  common: {
    hello: '你好',
    confirm: '确认',
    cancel: '取消',
    search: '搜索',
    add: '添加',
    edit: '编辑',
    delete: '删除',
    save: '保存'
  },
  menu: {
    home: '首页',
    dashboard: '仪表盘',
    user: '用户管理'
  },
  // 其他翻译内容...
}

 src/i18n/locales/en-US.js 

export default {
  common: {
    hello: 'Hello',
    confirm: 'Confirm',
    cancel: 'Cancel',
    search: 'Search',
    add: 'Add',
    edit: 'Edit',
    delete: 'Delete',
    save: 'Save'
  },
  menu: {
    home: 'Home',
    dashboard: 'Dashboard',
    user: 'User Management'
  },
  // 其他翻译内容...
}

 src/i18n/locales/index.js 

import zhCN from './zh-CN'
import enUS from './en-US'

export default {
  'zh-CN': zhCN,
  'en-US': enUS
}

5、在主应用中集成 src/main.js 

import { createApp } from 'vue'
import App from './App.vue'
import Antd from 'ant-design-vue'
import 'ant-design-vue/dist/reset.css'

import i18n, { antdLocales } from './i18n'
import { createI18nInstance } from './utils/i18n'

const app = createApp(App)

// 获取当前语言
const currentLocale = i18n.global.locale.value
// 设置 Ant Design Vue 语言包
app.use(Antd, {
  locale: antdLocales[currentLocale]
})

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

6、创建语言切换工具 src/utils/i18n.js 

import { antdLocales } from '@/i18n'
import { nextTick } from 'vue'

// 动态切换 Ant Design Vue 语言
export const setAntdLocale = (app, locale) => {
  const antdLocale = antdLocales[locale] || antdLocales['en-US']
  app.config.globalProperties.$antdLocale = antdLocale
  
  // 如果使用了 ConfigProvider，可以通过 provide/inject 方式传递
  // 这里简化处理，直接修改全局配置
}

// 切换语言的工具函数
export const switchLanguage = (i18n, app, locale) => {
  i18n.global.locale.value = locale
  localStorage.setItem('locale', locale)
  setAntdLocale(app, locale)
  
  // 触发重新渲染
  nextTick(() => {
    // 可以在这里触发一些需要重新计算的操作
  })
}

7、创建语言切换组件 src/components/LanguageSwitcher.vue 

<template>
  <a-dropdown>
    <template #overlay>
      <a-menu @click="handleMenuClick">
        <a-menu-item key="zh-CN">
          <span>🇨🇳 中文</span>
        </a-menu-item>
        <a-menu-item key="en-US">
          <span>🇺🇸 English</span>
        </a-menu-item>
      </a-menu>
    </template>
    <a-button>
      {{ currentLocale === 'zh-CN' ? '🇨🇳 中文' : '🇺🇸 English' }}
      <DownOutlined />
    </a-button>
  </a-dropdown>
</template>

<script setup>
import { ref, computed } from 'vue'
import { useI18n } from 'vue-i18n'
import { DownOutlined } from '@ant-design/icons-vue'

const { locale, t } = useI18n()
const currentLocale = computed({
  get: () => locale.value,
  set: (value) => {
    locale.value = value
    localStorage.setItem('locale', value)
  }
})

const handleMenuClick = ({ key }) => {
  currentLocale.value = key
}
</script>

 三、实际使用（测试用例）

1、 src/App.vue 

<template>
  <a-config-provider :locale="currentAntdLocale">
    <div id="app">
      <!-- 你的导航栏或其他全局组件 -->
      <header>
        <LanguageSwitcher />
      </header>
      <main>
        <router-view />
      </main>
    </div>
  </a-config-provider>
</template>

<script setup>
import { computed } from 'vue'
import { useI18n } from 'vue-i18n'
import LanguageSwitcher from '@/components/LanguageSwitcher.vue'
import { antdLocales } from '@/i18n'

const { locale } = useI18n()

const currentAntdLocale = computed(() => {
  return antdLocales[locale.value] || antdLocales['en-US']
})
</script>

2、在页面组件中使用src/views/HomePage.vue 

<template>
  <div class="home-page">
    <!-- 使用 t() 函数进行翻译 -->
    <h1>{{ t('common.welcome') }}</h1>
    <p>{{ t('common.description') }}</p>
    
    <!-- Ant Design 组件会自动使用当前语言 -->
    <a-button type="primary" @click="handleClick">
      {{ t('common.getStarted') }}
    </a-button>
    
    <!-- 表单示例 -->
    <a-form :model="form" @finish="onFinish">
      <a-form-item 
        :label="t('form.username')" 
        name="username" 
        :rules="[{ required: true, message: t('form.usernameRequired') }]"
      >
        <a-input v-model:value="form.username" />
      </a-form-item>
      
      <a-form-item>
        <a-button type="primary" html-type="submit">
          {{ t('common.submit') }}
        </a-button>
      </a-form-item>
    </a-form>
  </div>
</template>

<script setup>
import { reactive } from 'vue'
import { useI18n } from 'vue-i18n'

// 获取 i18n 实例
const { t, locale } = useI18n()

// 响应式数据
const form = reactive({
  username: ''
})

// 方法
const handleClick = () => {
  console.log('Current locale:', locale.value)
  // 可以根据当前语言执行不同逻辑
  if (locale.value === 'zh-CN') {
    console.log('中文环境')
  } else {
    console.log('English environment')
  }
}

const onFinish = (values) => {
  console.log('Form values:', values)
}
</script>