当前位置：首页 > VUE

vue 实现双语言

2026-02-19 13:05:02VUE

Vue 实现双语言（国际化）

在 Vue 项目中实现双语言（国际化）通常使用 vue-i18n 插件。以下是具体实现步骤：

安装 vue-i18n

通过 npm 或 yarn 安装 vue-i18n：

vue 实现双语言

npm install vue-i18n
# 或
yarn add vue-i18n

配置国际化文件

创建语言资源文件，例如 en.json（英文）和 zh.json（中文）：

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

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

初始化 vue-i18n

在 Vue 项目中初始化 vue-i18n：

vue 实现双语言

// main.js 或 plugins/i18n.js
import Vue from 'vue'
import VueI18n from 'vue-i18n'
import en from './locales/en.json'
import zh from './locales/zh.json'

Vue.use(VueI18n)

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

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

在组件中使用

在模板或脚本中使用国际化内容：

<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>

动态切换语言

通过修改 this.$i18n.locale 实现语言切换：

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

高级功能

复数处理：通过 $tc 方法实现复数形式。
日期和数字格式化：使用 $d 和 $n 方法。
懒加载语言包：按需加载语言资源，减少初始加载时间。

示例代码

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

通过以上步骤，可以在 Vue 项目中轻松实现双语言切换功能。