如何在Vue3中配置國際化語言i18n

1. 安裝 vue-i18n

npm i vue-i18n -S

2. 創建一個i8n的配置文件 如：i18nConfig.js

// 配置 vue-i18n 實現國際化語言設置
import { createI19n } from 'vue-i18n'

import zh_cn from '../language/zh-CN'
import en_us from '../language/en-US'
import CONFIG from '../../confing'

const messages = {
	// 目前只配置了中英兩種語言
	'zhCn': zh_cn,
	'en': en_US
}

const lang = CONFIG.locale

const i18n = createI18n({
	legacy: false,
	locale: lang, // 選擇使用哪種語言
	messages
})

export default i18n

3. 新建語言文件 zh-CN.js 和 en-US.js

• zh-CN.js 文件

// zh-CN.js 文件
const zh = {
	hello: '你好',
	// 根據業務需要，還可以分組規劃，讓代碼更清晰
	homeModule: {
		hi: '嗨'
	}
}

export default zh

• en-US.js 文件

// en-US.js 文件
const en = {
	hello: 'hello',
	// 根據業務需要，還可以分組規劃，讓代碼更清晰
	homeModule: {
		hi: 'hi'
	}
}

export default en

• CONFIG.js 文件

// CONFIG.js 文件
const CONFIG = {
	locale: 'zhCN' // zhCn —— 中文，en —— 英文
}

export default CONFIG

4. 在 main.js 裡面全局配置

// main.js 文件
......
import i18n from '../src/language/i18nConfig'
......

app.use(i18n)

......

通過上面四步即可配置完畢

下麵說一下如何使用，分三種情況

1. 在 .vue 組件中的 template 使用

<template>
	<div>{{ $t('hello') }}</div>
	<div>{{ $t('homeModule.hi') }}</div>
</template>

2. 在 .vue 組件中的 script 中使用

<script setup>
	const instance = getCurrentInstance() // 獲取當前組件實例
	const $t = instance.appContext.config.globalProperties.$t
	console.log($t('hello'))
	console.log($t('homeModule.hi'))
</script>

3. 在 .js 文件中使用

import i18n from '/src/language/i18nConfig'
const $t = i18n.global.t
console.log($t('hello'))
console.log($t('homeModule.hi'))

本文到此便已經記錄完畢，僅作為對工作中遇到的一些問題的記錄，方便後面翻看，如有大佬有更好的方法，感謝不吝賜教！！！