vue3怎么使用i18n

在 Vue 3 中使用国际化（i18n）通常涉及到使用 Vue I18n Next，这是 Vue 3 的官方国际化插件。以下是如何设置和使用 Vue I18n Next 的步骤：

1. 安装 Vue I18n Next

使用 npm 或 yarn 安装 Vue I18n Next：

npm install vue-i18n@next  
# 或者  
yarn add vue-i18n@next

2. 创建本地化消息文件

你可以创建 JSON 文件来存储不同语言的本地化消息。例如，en.json 用于英文，zh-CN.json 用于简体中文。

// en.json  
{  
  "hello": "Hello",  
  "message": "Hello, {name}!"  
}  
  
// zh-CN.json  
{  
  "hello": "你好",  
  "message": "你好，{name}！"  
}

3. 在 Vue 应用中设置和使用 Vue I18n

在你的主文件（通常是 main.js 或 main.ts）中，你需要创建 createI18n 实例并将其作为插件添加到 Vue 应用中。

import { createApp } from 'vue'  
import { createI18n } from 'vue-i18n'  
import App from './App.vue'  
  
// 导入你的本地化消息文件  
import enMessages from './locales/en.json'  
import zhCNMessages from './locales/zh-CN.json'  
  
// 创建 i18n 实例  
const i18n = createI18n({  
  locale: 'zh-CN', // 设置默认语言  
  fallbackLocale: 'en', // 当没有指定语言时的回退语言  
  messages: {  
    en: enMessages,  
    'zh-CN': zhCNMessages  
  }  
})  
  
// 创建 Vue 应用并安装 i18n 插件  
const app = createApp(App)  
app.use(i18n)  
app.mount('#app')

4. 在模板中使用本地化消息

在你的 Vue 组件模板中，你可以使用 $t 函数来翻译消息。这个函数是 Vue I18n 插件提供的，并且可以通过 this.$t 或在模板中使用 {{ $t('key') }} 的形式来访问。

<template>  
  <div>  
    <p>{{ $t('hello') }}</p>  
    <p>{{ $t('message', { name: 'Vue' }) }}</p>  
  </div>  
</template>  
  
<script>  
export default {  
  // ...  
}  
</script>

5. 切换语言

你可以通过编程方式更改当前的语言环境。在你的 Vue 组件中，你可以使用 this.$i18n.locale 来设置当前的语言

// 在某个方法中切换语言  
this.$i18n.locale = 'en' // 切换到英文

或者，你可以创建一个方法来处理语言切换，并在你的应用中调用这个方法。

6. 注意事项

• 确保你正确地引入了所有必要的本地化消息文件。
• 当你切换语言时，所有使用 $t 函数翻译的消息都会自动更新。
• Vue I18n Next 提供了许多其他功能和选项，如日期格式化、数字格式化、自定义格式化等。你可以查阅官方文档以获取更多信息。