一文详解如何在Vue3项目中实现国际化功能

npm install vue-i18n@9

// 中文语言包
// 这里把所有页面上会出现的文字都定义好
export default {
  // 通用
  common: {
    confirm: '确定',
    cancel: '取消',
    save: '保存',
    delete: '删除',
    search: '搜索',
    reset: '重置',
  },
  // 登录页
  login: {
    title: '用户登录',
    username: '用户名',
    password: '密码',
    remember: '记住密码',
    submit: '登 录',
    usernamePlaceholder: '请输入用户名',
    passwordPlaceholder: '请输入密码',
    success: '登录成功',
    failed: '登录失败，请检查用户名和密码',
  },
  // 导航菜单
  menu: {
    home: '首页',
    user: '用户管理',
    article: '文章管理',
    settings: '系统设置',
  },
  // 用户管理页
  user: {
    add: '新增用户',
    edit: '编辑用户',
    deleteConfirm: '确定要删除该用户吗？',
    deleteSuccess: '删除成功',
  },
}

// 英文语言包
export default {
  common: {
    confirm: 'Confirm',
    cancel: 'Cancel',
    save: 'Save',
    delete: 'Delete',
    search: 'Search',
    reset: 'Reset',
  },
  login: {
    title: 'User Login',
    username: 'Username',
    password: 'Password',
    remember: 'Remember me',
    submit: 'Login',
    usernamePlaceholder: 'Please input username',
    passwordPlaceholder: 'Please input password',
    success: 'Login successful',
    failed: 'Login failed, please check username and password',
  },
  menu: {
    home: 'Home',
    user: 'User Management',
    article: 'Article Management',
    settings: 'System Settings',
  },
  user: {
    add: 'Add User',
    edit: 'Edit User',
    deleteConfirm: 'Are you sure to delete this user?',
    deleteSuccess: 'Deleted successfully',
  },
}

// src/locales/index.js
import { createI18n } from 'vue-i18n'
import zh from './zh.js'
import en from './en.js'
// 创建 i18n 实例
const i18n = createI18n({
  // legacy: false 是必须的，它表示使用组合式 API 模式
  legacy: false,
  // 默认语言
  locale: 'zh',
  // 如果当前语言没有对应的翻译键，就用备用语言来兜底
  fallbackLocale: 'zh',
  // 所有的语言包都注册在这里
  messages: {
    zh,  // 中文
    en,  // 英文
  },
})
export default i18n

// main.js
import { createApp } from 'vue'
import App from './App.vue'
import i18n from './locales'  // 引入 i18n
const app = createApp(App)
app.use(i18n)   // 挂载
app.mount('#app')

<template>
  <div>
    <!-- 翻译登录页的标题 -->
    <h2>{{ $t('login.title') }}</h2>
    <!-- 翻译通用按钮 -->
    <button>{{ $t('common.confirm') }}</button>
    <button>{{ $t('common.cancel') }}</button>
    <!-- 翻译带占位符的，可以传参数 -->
    <p>{{ $t('login.success') }}</p>
  </div>
</template>

<script setup>
import { useI18n } from 'vue-i18n'
// useI18n 返回一个对象，里面有 t 函数
const { t } = useI18n()
// 在 JS 里翻译
function showMessage() {
  // t() 的第一个参数是翻译键，第二个是可选参数
  alert(t('login.success'))
}
</script>

<!-- 比如放在 App.vue 里 -->
<template>
  <div>
    <!-- 两个按钮切换语言 -->
    <button @click="switchLanguage('zh')">中文</button>
    <button @click="switchLanguage('en')">English</button>
    <!-- 页面内容 -->
    <router-view />
  </div>
</template>
<script setup>
import { useI18n } from 'vue-i18n'
const { locale } = useI18n()
function switchLanguage(lang) {
  // 直接修改 locale 的值，整个应用的翻译会自动更新
  locale.value = lang
  // 保存到本地，下次打开还是这个语言
  localStorage.setItem('lang', lang)
}
</script>

// src/locales/index.js（改进版）
import { createI18n } from 'vue-i18n'
import zh from './zh.js'
import en from './en.js'
// 从 localStorage 里取上次设置的语言，没有就默认中文
const savedLang = localStorage.getItem('lang') || 'zh'
const i18n = createI18n({
  legacy: false,
  locale: savedLang,  // 用缓存的语言
  fallbackLocale: 'zh',
  messages: { zh, en },
})
export default i18n

npm install element-plus

// main.js
import { createApp } from 'vue'
import App from './App.vue'
import i18n from './locales'
import ElementPlus from 'element-plus'
import 'element-plus/dist/index.css'
// 引入 Element Plus 的中文和英文包
import zhCn from 'element-plus/dist/locale/zh-cn.mjs'
import en from 'element-plus/dist/locale/en.mjs'
const app = createApp(App)
// 先注册 i18n
app.use(i18n)
// 注册 Element Plus，先用中文
app.use(ElementPlus, { locale: zhCn })
app.mount('#app')

<script setup>
import { useI18n } from 'vue-i18n'
import { use } from 'element-plus'
import zhCn from 'element-plus/dist/locale/zh-cn.mjs'
import en from 'element-plus/dist/locale/en.mjs'
const { locale } = useI18n()
function switchLanguage(lang) {
  locale.value = lang
  localStorage.setItem('lang', lang)
  // 同步更新 Element Plus 的语言
  // use() 是 Element Plus 提供的全局方法，可以切换配置
  const { locale: elLocale } = use()
  elLocale.value = lang === 'zh' ? zhCn : en
}
</script>

<!-- views/Login.vue -->
<template>
  <div class="login-page">
    <!-- 语言切换按钮 -->
    <div class="lang-switch">
      <button @click="switchLanguage('zh')">中文</button>
      <button @click="switchLanguage('en')">English</button>
    </div>
    <!-- 登录表单 -->
    <div class="login-form">
      <h2>{{ $t('login.title') }}</h2>
      <!-- 用户名 -->
      <el-input
        v-model="form.username"
        :placeholder="$t('login.usernamePlaceholder')"
      >
        <template #prefix>
          <span>{{ $t('login.username') }}</span>
        </template>
      </el-input>
      <!-- 密码 -->
      <el-input
        v-model="form.password"
        type="password"
        :placeholder="$t('login.passwordPlaceholder')"
      >
        <template #prefix>
          <span>{{ $t('login.password') }}</span>
        </template>
      </el-input>
      <!-- 记住密码 -->
      <el-checkbox v-model="form.remember">
        {{ $t('login.remember') }}
      </el-checkbox>
      <!-- 登录按钮 -->
      <el-button type="primary" @click="handleLogin">
        {{ $t('login.submit') }}
      </el-button>
    </div>
  </div>
</template>
<script setup>
import { reactive } from 'vue'
import { useI18n } from 'vue-i18n'
import { ElMessage } from 'element-plus'
const { t, locale } = useI18n()
const form = reactive({
  username: '',
  password: '',
  remember: false,
})
function handleLogin() {
  // 简单模拟登录
  if (form.username && form.password) {
    ElMessage.success(t('login.success'))
  } else {
    ElMessage.error(t('login.failed'))
  }
}
function switchLanguage(lang) {
  locale.value = lang
  localStorage.setItem('lang', lang)
}
</script>
<style scoped>
.login-page {
  max-width: 400px;
  margin: 100px auto;
}
.lang-switch {
  text-align: right;
  margin-bottom: 20px;
}
.login-form {
  display: flex;
  flex-direction: column;
  gap: 15px;
}
</style>

// zh.js
export default {
  welcome: '欢迎你，{name}！',
}
// en.js
export default {
  welcome: 'Welcome, {name}!',
}

<p>{{ $t('welcome', { name: userName }) }}</p>