当前位置：首页 > VUE

vue实现中英切换

2026-03-08 14:53:01VUE

Vue 中实现中英切换

使用 vue-i18n 插件

安装 vue-i18n 插件，这是 Vue 官方推荐的多语言解决方案。

npm install vue-i18n

在项目中创建语言包文件，例如 en.json 和 zh.json，分别存储英文和中文的翻译内容。

// en.json
{
  "welcome": "Welcome",
  "home": "Home"
}

// zh.json
{
  "welcome": "欢迎",
  "home": "首页"
}

在 Vue 项目中配置 vue-i18n，通常在 main.js 或单独的语言配置文件中进行。

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

Vue.use(VueI18n)

const messages = {
  en: require('./locales/en.json'),
  zh: require('./locales/zh.json')
}

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

new Vue({
  i18n,
  render: h => h(App)
}).$mount('#app')

在组件中使用 $t 方法进行文本翻译。

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

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

动态加载语言包

对于大型项目，可以采用动态加载语言包的方式，减少初始加载时间。

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

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

loadLocaleMessages('en').then(messages => {
  i18n.setLocaleMessage('en', messages)
})

在切换语言时动态加载对应的语言包。

changeLanguage(lang) {
  loadLocaleMessages(lang).then(messages => {
    this.$i18n.setLocaleMessage(lang, messages)
    this.$i18n.locale = lang
  })
}

存储用户语言偏好

使用 localStorage 存储用户选择的语言偏好，确保下次访问时保持相同的语言设置。

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

changeLanguage(lang) {
  localStorage.setItem('locale', lang)
  this.$i18n.locale = lang
}

路由与语言切换结合

在 Vue Router 中，可以通过路由参数或前缀实现语言切换。

const router = new VueRouter({
  routes: [
    {
      path: '/:lang',
      component: App,
      children: [
        { path: 'home', component: Home }
      ]
    }
  ]
})

在导航守卫中处理语言切换逻辑。

router.beforeEach((to, from, next) => {
  const lang = to.params.lang
  if (lang) {
    i18n.locale = lang
  }
  next()
})

使用 Composition API

在 Vue 3 中使用 Composition API 实现语言切换。

vue实现中英切换

import { useI18n } from 'vue-i18n'

export default {
  setup() {
    const { locale } = useI18n()

    const changeLanguage = (lang) => {
      locale.value = lang
    }

    return { changeLanguage }
  }
}

通过以上方法，可以灵活地在 Vue 项目中实现中英切换功能。