Vue3+Vant4配置国际化vue-i18n

安装依赖

yarn add vue-i18n

创建语言文件

在项目中创建一个 locales 文件夹，并在其中创建语言文件，例如 zh-CN.js 和 en-US.js。每个语言文件导出一个对象，包含对应语言的翻译。

// zh-CN.js
export default {
  tabbar: {
    home: '首页',
    list: '列表',
    user: '我的'
  },
  home: {
    hello: '你好',
    welcome: '欢迎'
  }
}

// en-US.js
export default {
  tabbar: {
    home: '首页',
    list: '列表',
    user: '我的'
  },
  home: {
    hello: '你好',
    welcome: '欢迎'
  }
}

配置 Vue-i18n

在 main.js 中配置 vue-i18n：

import { createApp } from 'vue';
import { createI18n } from 'vue-i18n';
import App from './App.vue';
import zhCN from './locales/zh-CN.js';
import enUS from './locales/en-US.js';

const messages = {
  'zh-CN': zhCN,
  'en-US': enUS,
};

const i18n = createI18n({
  locale: 'zh-CN', // 默认语言
  messages,
});

const app = createApp(App);
app.use(i18n);
app.mount('#app');

配置 Vant 的国际化

在使用 Vant 的组件之前，需要在 main.js 中配置 Vant 的国际化：

import { createApp } from 'vue';
import { createI18n } from 'vue-i18n';
import { Locale } from 'vant';
//vant的语言包
import vantZhCN from 'vant/lib/locale/lang/zh-CN';
import vantEnUS from 'vant/lib/locale/lang/en-US';
import App from './App.vue';
//本地语言包
import zhCN from './locales/zh-CN.js';
import enUS from './locales/en-US.js';

const messages = {
  'zh-CN': {
    ...zhCN,
    ...vantZhCN,
  },
  'en-US': {
    ...enUS,
    ...vantEnUS,
  },
};

// 从本地存储中获取语言设置
const savedLanguage = localStorage.getItem('language')
const i18n = createI18n({
  legacy: false,
  // 全局注册 $t方法
  globalInjection: true,
  locale: savedLanguage || 'zh-CN', // 默认语言
  messages
})

Locale.use(i18n.global.locale.value, messages[i18n.global.locale.value])

const app = createApp(App);

// 在语言切换方法中更新语言配置和本地存储
app.config.globalProperties.changeLanguage = (locale) => {
  console.log(11111)
  i18n.global.locale.value = locale
  Locale.use(locale, messages[locale])
  localStorage.setItem('language', locale) // 将语言设置存储到本地存储中
}

app.use(i18n);
app.mount('#app');

Locale.use(i18n.global.locale.value, messages[i18n.global.locale.value]) 这段代码是在 Vant 中使用 Locale.use 方法来更新语言配置。

i18n.global.locale.value 表示当前的语言环境，其中 i18n.global.locale 是一个响应式的对象，使用 .value 来获取实际的值。这个值可以是 'zh-CN' 或 'en-US'，表示中文或英文等语言代码。
messages[i18n.global.locale.value] 表示根据当前语言环境从 messages 对象中获取对应语言的翻译内容。messages 是一个包含不同语言翻译的对象，根据语言环境作为键来获取相应的翻译内容。

通过传递语言环境和对应的翻译内容给 Locale.use 方法，可以更新 Vant 组件库中的语言配置。这样，当语言环境发生变化时，Vant 组件将会显示相应的翻译内容。

需要注意的是，i18n.global.locale 和 messages 都应该是响应式的对象，以便在语言环境发生变化时能够自动更新。

最后我们全局定义了一个changeLanguage切换语言的方法。

在组件中使用翻译

现在，在任何组件中，你都可以使用 $t 方法来获取翻译后的文本，然后直接调用changeLanguage方法即可切换语言。

<template>
  <div>
    <p>{{ $t('home.hello') }}</p>
    <p>{{ $t('home.welcome') }}</p>
    <button @click="changeLanguage('zh-CN')">中文</button>
    <button @click="changeLanguage('en-US')">English</button>
  </div>
</template>