当前位置：首页 > VUE

vue怎么实现切换语言

2026-02-21 14:43:54VUE

实现 Vue 多语言切换的方法

使用 vue-i18n 插件

vue-i18n 是 Vue 官方推荐的多语言解决方案，可以轻松实现国际化功能。

安装 vue-i18n：

npm install vue-i18n

创建 i18n 实例：

import Vue from 'vue'
import VueI18n from 'vue-i18n'

Vue.use(VueI18n)

const messages = {
  en: {
    message: {
      hello: 'hello world'
    }
  },
  zh: {
    message: {
      hello: '你好世界'
    }
  }
}

const i18n = new VueI18n({
  locale: 'en', // 默认语言
  messages
})

new Vue({
  i18n
}).$mount('#app')

模板中使用：

<p>{{ $t('message.hello') }}</p>

切换语言方法：

this.$i18n.locale = 'zh' // 切换到中文

动态加载语言包

对于大型项目，可以按需加载语言包：

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

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

async function setI18nLanguage(lang) {
  if (!i18n.availableLocales.includes(lang)) {
    const messages = await loadLocaleMessages(lang)
    i18n.setLocaleMessage(lang, messages)
  }
  i18n.locale = lang
  return lang
}

持久化语言选择

使用 localStorage 保存用户的语言偏好：

const savedLocale = localStorage.getItem('locale') || 'en'
const i18n = new VueI18n({
  locale: savedLocale,
  messages
})

function changeLanguage(locale) {
  i18n.locale = locale
  localStorage.setItem('locale', locale)
}

组件中使用

在组件中可以直接使用 $t 方法：

<template>
  <div>
    <h1>{{ $t('title') }}</h1>
    <button @click="switchLanguage('en')">English</button>
    <button @click="switchLanguage('zh')">中文</button>
  </div>
</template>

<script>
export default {
  methods: {
    switchLanguage(lang) {
      this.$i18n.locale = lang
    }
  }
}
</script>

路由集成

结合 vue-router 实现 URL 语言切换：

const router = new VueRouter({
  routes: [
    {
      path: '/:lang',
      component: App,
      beforeEnter(to, from, next) {
        const lang = to.params.lang
        setI18nLanguage(lang).then(() => next())
      }
    }
  ]
})

日期时间本地化

处理日期和时间的本地化：

import { DateTime } from 'luxon'

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

const i18n = new VueI18n({
  locale: 'en',
  dateTimeFormats
})

模板中使用：