vue3实现语言切换vue-i18n

静小谢2026-02-04 8:31

vue3实现语言切换vue-i18n

1、安装依赖

javascript 复制代码

npm install vue-i18n@next

2、创建配置文件locales

en.json

javascript 复制代码

{
  "num1": "num1",
  "num2": "num2"
}

zh.json

javascript 复制代码

{
  "num1": "数字1",
  "num2": "数字2"
}

i18n.js

javascript 复制代码

import { createI18n } from 'vue-i18n'
import zh from './zh.json'
import en from './en.json'
const messages = {
  zh,
  en,
}
// 默认语言（可从 localStorage 或 navigator.language 获取）
const savedLocale = localStorage.getItem('locale') || 'zh'
const i18n = createI18n({
  locale: savedLocale,
  fallbackLocale: 'en',
  messages,
})

export default i18n

3、main.js引用

javascript 复制代码

import i18n from '@/locales/i18n'
app.use(i18n)

4、组件里使用

javascript 复制代码

<script setup>
import { useI18n } from 'vue-i18n'
const { locale } = useI18n()
const toggleLanguage = () => {
  const newLocale = locale.value === 'zh' ? 'en' : 'zh'
  locale.value = newLocale
  localStorage.setItem('locale', newLocale) // 保存用户偏好
}
</script>

<template>
  <div>
    <button @click="toggleLanguage()">切换语言</button>
    <div>{{ $t('num1') }}</div>
    <div>{{ $t('num2') }}</div>
  </div>
</template>