🔴Vue-i18n的使用

安装

pnpm i vue-i18n@latest

模块导入

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

index.ts:基本配置

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

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

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

src/locale/index.ts

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

export default {
  'hello': 'Hello'
}

src/locale/zh-CN.ts

export default {
	'hello': '你好'
}

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

import { createApp } from 'vue'
// ......
import i18n from './locale'

const app = createApp()

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

app.mount('#app')

使用

模板中使用

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

setup中使用

<script setup>
import { useI18n } from 'vue-i18n'

const { t } = useI18n

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

sayHi()
</script>

切换语言