vue3 i18n 国际化代码预览
时间: 2025-01-26 11:18:54 浏览: 41
### Vue3 中使用 i18n 实现国际化
为了实现Vue3中的国际化功能,通常会采用`vue-i18n`库来管理多语言支持。下面是一个完整的代码示例展示如何设置并使用这个插件。
#### 安装依赖包
首先,在项目根目录下通过npm安装必要的软件包:
```bash
npm install vue-i18n@next
```
#### 创建 `i18n.js` 文件
接着创建一个新的文件用于配置`vue-i18n`实例,并定义不同语言的消息对象:
```javascript
// src/i18n.js
import { createI18n } from 'vue-i18n'
const messages = {
en: {
message: {
hello: 'hello world'
}
},
zh: {
message: {
hello: '你好,世界'
}
}
}
export const i18n = createI18n({
locale: 'en', // 设置默认语言环境
fallbackLocale: 'en',
messages,
})
```
此部分展示了初始化过程以及加载翻译资源的方式[^3]。
#### 修改 main.js 来引入 i18n
为了让整个应用程序都能访问到这些本地化字符串,需要修改入口文件main.js如下所示:
```javascript
// src/main.js
import { createApp } from 'vue'
import App from './App.vue'
import router from './router'
import store from './store'
import { i18n } from './i18n' // 导入刚刚创建好的i18n实例
createApp(App).use(store).use(router).use(i18n).mount('#app')
```
这段代码说明了怎样把自定义的i18n模块集成到了Vue应用当中[^4]。
#### 使用 `<i18n>` 标签声明组件内的局部文本片段
如果希望某些特定于某个页面或组件的文字也能被翻译,则可以在单文件组件(SFC)内部利用特殊的<i18n>标签来进行描述:
```html
<!-- src/views/HomeView.vue -->
<template>
<div class="home">
<h1>{{ $t('message.hello') }}</h1>
</div>
</template>
<script setup lang="ts"></script>
<style scoped></style>
<i18n>
{
"zh": {
"message": {
"hello": "欢迎来到首页"
}
}
}
</i18n>
```
这里给出了一个具体的例子,解释了如何在模板里调用$t()方法获取对应的语言版本[^1]。
阅读全文
相关推荐



















