在 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 提供了许多其他功能和选项，如日期格式化、数字格式化、自定义格式化等。你可以查阅官方文档以获取更多信息。
