vue3 实现国际化语言
时间: 2023-07-12 08:20:00 浏览: 59
要在 Vue3 中实现国际化语言,可以使用 Vue I18n 插件。下面是一些基本的实现步骤:
1. 安装 Vue I18n 插件。可以使用 npm 或 yarn 安装:
```
npm install vue-i18n
```
2. 在 main.js 中引入 Vue I18n 插件并创建实例:
```javascript
import { createApp } from 'vue'
import App from './App.vue'
import { createI18n } from 'vue-i18n'
const i18n = createI18n({
locale: 'zh-CN',
messages: {
'zh-CN': {
hello: '你好'
},
'en-US': {
hello: 'Hello'
}
}
})
createApp(App).use(i18n).mount('#app')
```
在上面的例子中,我们创建了一个名为 i18n 的 Vue I18n 实例,并传入了两个参数:locale 和 messages。
locale 表示当前的语言环境,默认为 'zh-CN',即中文。
messages 是一个对象,其中包含了所有支持的语言环境和对应的翻译。在上面的例子中,我们支持了中文和英文两种语言环境,并分别提供了相应的翻译。
3. 在组件中使用翻译:
```html
<template>
<div>{{ $t('hello') }}</div>
</template>
```
在上面的例子中,我们在模板中使用了 $t 方法来获取翻译。$t 方法的参数是需要翻译的字符串,即上面 messages 中的键值对的键。在这个例子中,$t('hello') 将会返回当前语言环境下对应的翻译,即 '你好' 或 'Hello'。
除了 $t 方法外,Vue I18n 还提供了一些其他的 API,比如 $tc、$te 等,可以根据具体需要选择使用。