vue-i18n使用文档

文档地址:https://www.bookstack.cn/read/vue-i18n-8.x/spilt.2.4e9cded0cfe86bd2.md#mergeLocaleMessage(%20locale,%20message%20)

### ### 安装 vue-i18nVue 3 项目中集成 vue-i18n 时,首先需要通过 npm 或 yarn 安装 vue-i18n 包。可以使用以下命令进行安装: ```bash npm install vue-i18n@9 ``` 安装完成后,即可在项目中引入 vue-i18n 并进行配置 [^1]。 ### ### 配置 vue-i18nVue 3 项目中,需要通过 `createI18n` 函数创建 i18n 实例,并将其传递给 Vue 应用。以下是基本的配置步骤: 1. 在 `src` 目录下创建一个 `locales` 文件夹,用于存放不同语言的翻译文件。例如: - `en-US.json`:英文语言包 - `zh-CN.json`:中文语言包 2. 在 `main.js` 或 `main.ts` 中引入 vue-i18n 并配置多语言支持: ```javascript import { createApp } from 'vue' import { createI18n } from 'vue-i18n' import App from './App.vue' // 引入语言包 import enUS from './locales/en-US.json' import zhCN from './locales/zh-CN.json' // 创建 i18n 实例 const i18n = createI18n({ legacy: false, // 设为 true 可以兼容 Vue 2 的写法 locale: 'en-US', // 设置默认语言 fallbackLocale: 'en-US', // 设置回退语言 availableLocales: ['en-US', 'zh-CN'], // 支持的语言列表 messages: { 'en-US': enUS, 'zh-CN': zhCN } }) // 创建 Vue 应用并使用 i18n const app = createApp(App) app.use(i18n) app.mount('#app') ``` 通过上述配置,可以实现选项式和组合式 API 的混合使用 [^3]。 ### ### 使用 vue-i18nVue 组件中,可以通过 `$t` 方法访问翻译内容。例如,在模板中使用: ```vue <template> <div> <h1>{{ $t('welcome') }}</h1> <p>{{ $t('description') }}</p> </div> </template> ``` 同时,可以在脚本中通过 `useI18n` 函数访问 i18n 实例,例如: ```vue <script setup> import { useI18n } from 'vue-i18n' const { locale } = useI18n() // 切换语言 locale.value = 'zh-CN' </script> ``` ### ### 国际化语言支持的扩展 i18n 国际化支持的用法非常丰富,包括动态语言切换、复数形式、日期和数字格式化等。具体功能可以参考 vue-i18n 的官方文档 [^2]。 --- ###
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值