当前位置：首页 > VUE

vue国际化实现

2026-01-22 03:08:48VUE

Vue 国际化实现方法

使用 vue-i18n 插件

安装 vue-i18n 插件：

npm install vue-i18n

在 Vue 项目中配置：

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 loadLanguageAsync(lang) {
  const messages = await import(`@/lang/${lang}.json`)
  i18n.setLocaleMessage(lang, messages.default)
  i18n.locale = lang
}

格式化处理

处理复数、日期等复杂格式化：

const messages = {
  en: {
    car: 'car | cars',
    date: '{date, date}'
  }
}

组件内使用

在组件选项中定义本地化内容：

export default {
  i18n: {
    messages: {
      en: { button: 'Submit' },
      zh: { button: '提交' }
    }
  }
}

路由国际化

结合 vue-router 实现路由本地化：

const routes = [
  {
    path: '/home',
    component: Home,
    meta: {
      title: 'route.home'
    }
  }
]

router.beforeEach((to, from, next) => {
  document.title = i18n.t(to.meta.title)
  next()
})

浏览器语言检测

自动检测用户浏览器语言：

const navigatorLang = navigator.language.split('-')[0]
i18n.locale = ['en', 'zh'].includes(navigatorLang) ? navigatorLang : 'en'

持久化存储

使用 localStorage 保存语言偏好：

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

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

单元测试

测试国际化组件：

import { mount } from '@vue/test-utils'
import Component from './Component.vue'

const wrapper = mount(Component, {
  mocks: {
    $t: (key) => key
  }
})

服务端渲染

在 Nuxt.js 中使用国际化：

// nuxt.config.js
export default {
  modules: [
    'nuxt-i18n'
  ],
  i18n: {
    locales: ['en', 'zh'],
    defaultLocale: 'en',
    vueI18n: {
      fallbackLocale: 'en'
    }
  }
}

vue国际化实现