当前位置：首页 > VUE

vue项目实现不同语言

2026-01-22 21:24:19VUE

国际化（i18n）配置

安装 vue-i18n 库：

npm install vue-i18n

在项目中创建语言文件（如 src/locales/en.json 和 src/locales/zh.json）：

// en.json
{
  "welcome": "Welcome",
  "button": {
    "submit": "Submit"
  }
}

// zh.json
{
  "welcome": "欢迎",
  "button": {
    "submit": "提交"
  }
}

初始化 i18n 实例

在 src/main.js 中配置：

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

const i18n = createI18n({
  locale: 'en', // 默认语言
  fallbackLocale: 'en', // 回退语言
  messages: { en, zh }
})

const app = createApp(App)
app.use(i18n)
app.mount('#app')

切换语言实现

在组件中添加语言切换逻辑：

import { useI18n } from 'vue-i18n'

export default {
  setup() {
    const { locale } = useI18n()
    const changeLanguage = (lang) => {
      locale.value = lang
    }
    return { changeLanguage }
  }
}

模板中使用：

<button @click="changeLanguage('en')">English</button>
<button @click="changeLanguage('zh')">中文</button>
<p>{{ $t('welcome') }}</p>

动态导入语言文件

优化大型项目语言加载：

const loadLocaleMessages = async (locale) => {
  const response = await fetch(`./locales/${locale}.json`)
  return response.json()
}

const i18n = createI18n({
  locale: 'en',
  fallbackLocale: 'en',
  messages: {}
})

// 动态加载语言
async function setLocale(lang) {
  const messages = await loadLocaleMessages(lang)
  i18n.global.setLocaleMessage(lang, messages)
  i18n.global.locale = lang
}

路由参数集成

结合 vue-router 实现 URL 语言标识：

const router = createRouter({
  routes,
  parseQuery: (query) => {
    if (query.lang) i18n.global.locale = query.lang
    return query
  }
})

日期时间本地化

配置日期时间格式：

const datetimeFormats = {
  'en': {
    short: {
      year: 'numeric', month: 'short', day: 'numeric'
    }
  },
  'zh': {
    short: {
      year: 'numeric', month: 'short', day: 'numeric'
    }
  }
}

const i18n = createI18n({
  datetimeFormats,
  // ...其他配置
})

模板中使用：

<p>{{ $d(new Date(), 'short') }}</p>

复数处理

配置复数规则：

const messages = {
  en: {
    apple: 'apple | apples'
  }
}

// 使用方式
$tc('apple', 1) // "apple"
$tc('apple', 5) // "apples"

浏览器语言自动检测

添加自动检测逻辑：

const browserLang = navigator.language.split('-')[0]
const supportedLangs = ['en', 'zh']
const defaultLang = supportedLangs.includes(browserLang) ? browserLang : 'en'

const i18n = createI18n({
  locale: defaultLang,
  // ...其他配置
})

持久化存储

使用 localStorage 保存语言选择：

vue项目实现不同语言

const savedLang = localStorage.getItem('user-lang') || 'en'
const i18n = createI18n({
  locale: savedLang,
  // ...其他配置
})

// 切换语言时保存
function changeLanguage(lang) {
  i18n.global.locale = lang
  localStorage.setItem('user-lang', lang)
}