vue3 vue-i18n
时间: 2025-08-11 07:57:57 浏览: 3
在 Vue 3 项目中使用 `vue-i18n` 实现国际化功能,可以按照以下步骤进行配置和开发,以支持多语言切换和消息管理。
### 一、安装 vue-i18n
首先确保你的项目是基于 Vue 3 构建的,然后通过 npm 或 yarn 安装适用于 Vue 3 的 `vue-i18n` 版本(当前最新为 9.x):
```bash
npm install vue-i18n@9
```
或者使用 yarn:
```bash
yarn add vue-i18n@9
```
### 二、创建语言包
在项目中创建一个 `locales` 文件夹,用于存放不同语言的翻译文件。例如:
```
src/
└── locales/
├── en.json
└── zh-CN.json
```
内容示例如下:
**en.json**
```json
{
"greeting": "Hello, welcome to our application!"
}
```
**zh-CN.json**
```json
{
"greeting": "你好,欢迎使用我们的应用!"
}
```
### 三、配置 i18n 实例
在 `main.js` 或 `main.ts` 中引入并配置 `createI18n`:
```javascript
import { createApp } from 'vue'
import { createI18n } from 'vue-i18n'
import App from './App.vue'
import en from './locales/en.json'
import zhCN from './locales/zh-CN.json'
// 创建 i18n 实例
const i18n = createI18n({
legacy: false, // 使用 Composition API 模式
locale: 'en', // 设置默认语言
fallbackLocale: 'en', // 设置回退语言
messages: {
en,
'zh-CN': zhCN
}
})
const app = createApp(App)
app.use(i18n)
app.mount('#app')
```
### 四、在组件中使用翻译
在 Vue 组件中,可以使用 `useI18n` 钩子来访问翻译内容:
```vue
<script setup>
import { useI18n } from 'vue-i18n'
const { t } = useI18n()
</script>
<template>
<h1>{{ t('greeting') }}</h1>
</template>
```
### 五、动态切换语言
可以通过修改 `i18n.global.locale` 来实现语言切换:
```javascript
import { useI18n } from 'vue-i18n'
const { locale } = useI18n()
function changeLanguage(lang) {
locale.value = lang
}
```
在模板中添加切换按钮:
```vue
<button @click="changeLanguage('en')">English</button>
<button @click="changeLanguage('zh-CN')">中文</button>
```
### 六、与 i18n-ally 插件结合使用(可选)
为了更高效地管理和编辑多语言内容,可以集成 `i18n-ally` 插件,它提供了一个直观的界面用于翻译和同步语言文件。该插件支持自动提取翻译键、预览翻译内容等功能,极大提升了开发效率[^3]。
---
阅读全文
相关推荐



















