如何在Vue3中配置国际化语言i18n

  • 如何在Vue3中配置国际化语言i18n已关闭评论
  • 124 次浏览
  • A+
所属分类：Web前端
摘要

通过上面四步即可配置完毕下面说一下如何使用，分三种情况本文到此便已经记录完毕，仅作为对工作中遇到的一些问题的记录，方便后面翻看，如有大佬有更好的方法，感谢不吝赐教！！！
便宜好用的国外VPS推荐

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>
  1. 在 .vue 组件中的 script 中使用
<script setup> 	const instance = getCurrentInstance() // 获取当前组件实例 	const $t = instance.appContext.config.globalProperties.$t 	console.log($t('hello')) 	console.log($t('homeModule.hi')) </script>
  1. 在 .js 文件中使用
import i18n from '/src/language/i18nConfig' const $t = i18n.global.t console.log($t('hello')) console.log($t('homeModule.hi'))

本文到此便已经记录完毕，仅作为对工作中遇到的一些问题的记录，方便后面翻看，如有大佬有更好的方法，感谢不吝赐教！！！

便宜好用的国外VPS推荐