🔴Vue-i18n的使用

本文最后更新于:2022年9月2日 晚上

安装

1
pnpm i vue-i18n@latest

模块导入

src目录新建locale文件夹存储vue-i18n的初始配置文件

index.ts:基本配置

en-US.ts:文件存储英语

zh-CN.ts:文件存储汉语

还可使用更多的文件来支持多语言国际化,文件名可以参考这篇国际化资源文件命名规范

src/locale/index.ts

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
import { createI18n } from 'vue-i18n'
import en from './en-US' // 导入英文
import cn from './zh-CN' // 导入汉字

export const LOCALE_OPTIONS = [
{ label: '中文', value: 'zh-CN' },
{ label: 'English', value: 'en-US' },
]

/**
* 配置默认语种
*/
const defaultLocale = localStorage.getItem('localeLanguage') || 'zh-CN'

const i18n = createI18n({
legacy: false,
globalInjection: true,
locale: defaultLocale, // 默认语言
fallbackLocale: 'zh-CN',
messages: { // 所有支持的语言
'en-US': en,
'zh-CN': cn,
},
})

export default i18n

src/locale/en-US.ts

1
2
3
export default {
'hello': 'Hello'
}

src/locale/zh-CN.ts

1
2
3
export default {
'hello': '你好'
}

Vue的项目入口文件导入vue-i18n就可使用了

1
2
3
4
5
6
7
8
9
10
import { createApp } from 'vue'
// ......
import i18n from './locale'

const app = createApp()

// ......
app.use(i18n)

app.mount('#app')

使用

模板中使用

1
2
3
<template>
<h1>{{ $t('hello') }}</h1>
</template>

setup中使用

1
2
3
4
5
6
7
8
9
<script setup>
import { useI18n } from 'vue-i18n'

const { t } = useI18n

const sayHi = () => console.log(t('hello'))

sayHi()
</script>

切换语言


🔴Vue-i18n的使用
https://qingshaner.com/Vue-i18n的使用/
作者
清山
发布于
2022年7月12日
许可协议