Vue 快速实现国际化api
时间: 2024-05-04 11:17:24 浏览: 13
Vue 提供了一个插件 `vue-i18n`,可以方便快捷地实现国际化。使用 `vue-i18n` 可以轻松地切换不同语言的文本信息,同时也可以很方便地管理和维护多语言的文本信息。
以下是一个简单的示例:
1. 安装 `vue-i18n`
```
npm install vue-i18n --save
```
2. 在 `main.js` 中引入 `vue-i18n` 并创建实例
```
import Vue from 'vue'
import VueI18n from 'vue-i18n'
Vue.use(VueI18n)
const i18n = new VueI18n({
locale: 'en', // 默认语言
messages: {
en: {
message: {
hello: 'Hello, world!'
}
},
zh: {
message: {
hello: '你好,世界!'
}
}
}
})
new Vue({
el: '#app',
i18n,
template: '<App/>',
components: { App }
})
```
3. 在组件中使用 `$t` 方法输出文本信息
```
<template>
<div>
<p>{{ $t('message.hello') }}</p>
</div>
</template>
```
4. 切换语言
```
this.$i18n.locale = 'zh' // 切换为中文
```
以上是 `vue-i18n` 的基本使用方法,更多详细信息可以查看官方文档。