当前位置：首页 > VUE

vue实现语言切换

2026-01-08 08:08:02VUE

Vue 实现语言切换的方法

使用 vue-i18n 插件

安装 vue-i18n 插件：

npm install vue-i18n

在项目中配置 vue-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')

切换语言的代码：

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

动态加载语言包

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

async function loadLocaleMessages(locale) {
  const messages = await import(`@/locales/${locale}.json`)
  i18n.setLocaleMessage(locale, messages.default)
  return nextTick()
}

存储用户语言偏好

使用 localStorage 保存用户选择的语言：

const savedLocale = localStorage.getItem('locale') || 'en'
i18n.locale = savedLocale

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

在模板中使用翻译

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

处理复数形式和插值

vue-i18n 支持复数形式和变量插值：

messages: {
  en: {
    message: {
      apple: 'apple | apples',
      hello: 'Hello {name}'
    }
  }
}

<div>{{ $tc('message.apple', 2) }}</div>
<div>{{ $t('message.hello', { name: 'John' }) }}</div>

日期和货币本地化

vue-i18n 支持日期和货币的本地化处理：

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

const i18n = new VueI18n({
  dateTimeFormats
})

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

响应式语言切换

创建语言切换组件：

vue实现语言切换

<template>
  <select v-model="$i18n.locale">
    <option v-for="lang in availableLocales" :key="lang" :value="lang">
      {{ lang }}
    </option>
  </select>
</template>

<script>
export default {
  computed: {
    availableLocales() {
      return Object.keys(this.$i18n.messages)
    }
  }
}
</script>