Vue 项目前端国际化 i18n 实战指南

en-US.json

{
  "common": {
    "confirm": "Confirm",
    "cancel": "Cancel",
    "pleaseEnterUsernameAndPassword": "Please enter username and password",
    "loginSuccess": "Login success",
    "loginFail": "Login fail"
  },
  "loginPage": {
    "title": "XX Management System",
    "userLogin": "User Login",
    "username": "Username",
    "password": "Password",
    "usernamePlaceholder": "Please enter username",
    "passwordPlaceholder": "Please enter password",
    "languageLabel": "Language",
    "loginButton": "Login",
    "text1": "If you have any questions, please contact technical support for assistance."
  }
}

避坑指南

JSON 格式非常严格，最后一个属性后面不能加逗号，否则会导致解析报错。检查时务必留意末尾符号。

初始化 i18n 实例

在 src/i18n.js 中配置 Vue I18n 实例。这里采用 Vue 3 的 Composition API 模式（legacy: false）。

// src/i18n.js
import { createI18n } from 'vue-i18n'
import zhCN from './locales/zh-CN.json'
import enUS from './locales/en-US.json'

// 从本地存储读取上次设置的语言，未设置则根据浏览器语言或默认中文
const savedLocale = localStorage.getItem('user-locale')
const browserLocale = navigator.language || 'zh-CN'
const defaultLocale = savedLocale || (browserLocale.startsWith('en') ? 'en-US' : 'zh-CN')

const i18n = createI18n({
  legacy: false,
  locale: defaultLocale,
  fallbackLocale: 'zh-CN',
  messages: {
    'zh-CN': zhCN,
    'en-US': enUS
  }
})

// 提供切换语言的方法并持久化
export function setLocale(locale) {
  i18n.global.locale.value = locale
  localStorage.setItem('user-locale', locale)
}

export default i18n

组件中使用

引入与调用

在 <script setup> 标签内引入 useI18n 获取翻译函数 t。

<script setup>
import { useI18n } from 'vue-i18n'
const { t } = useI18n()
// 其他逻辑...
</script>

模板渲染

在模板中直接使用 $t() 方法，通过点号连接层级路径。

<template>
  <div>
    <h1>{{ $t('loginPage.title') }}</h1>
    <h2>{{ $t('loginPage.userLogin') }}</h2>
    <input :placeholder="$t('loginPage.usernamePlaceholder')" />
    <!-- 语言选择器 -->
    <select v-model="currentLanguage" @change="changeLanguage">
      <option value="zh-CN">简体中文</option>
      <option value="en-US">English</option>
    </select>
    <button @click="handleLogin">{{ $t('loginPage.loginButton') }}</button>
  </div>
</template>

实现语言切换逻辑

为了让下拉框生效，需要在 script 中添加切换函数。结合之前定义的 setLocale 方法，实现实时切换并保存偏好。

<script setup>
import { ref } from 'vue'
import { useI18n } from 'vue-i18n'
import { setLocale } from '@/i18n'

const { t } = useI18n()
const currentLanguage = ref('zh-CN')

const changeLanguage = (e) => {
  const lang = e.target.value
  currentLanguage.value = lang
  setLocale(lang)
}

// 其他业务逻辑...
</script>

完成上述步骤后，刷新页面即可看到界面随语言切换而变化。