Vue3使用i18n插件实现多种语言切换的功能

1.下载i18n插件

npm install vue-i18n  或者 yarn add vue-i18n

2.创建翻译文件的文本内容,创建index.js和 i18n.ts

index.ts为范围文件内容的导出文件。
i18n.ts为翻译文件的入口文件,此文件需引入全局main.ts文件内
(ts还是js根据自身项目的语法而定)
下面为三个文件内容

index.ts

import ch from './zh-CN'


import en from './en'

export default {
  ch, en
}

i18n.ts

//进行切换语言环境的时候,我们可以使用前端缓存来存储,判断当前的语种环境
import { createI18n } from 'vue-i18n' //引入vue-i18n组件
import messages from './index'

const i18n = createI18n({
  fallbackLocale: localStorage.getItem('lang') || "en",//预设语言环境
  globalInjection: true,
  legacy: false, // you must specify 'legacy: false' option
  locale: localStorage.getItem('lang') || "en",//默认显示的语言 
  messages,//本地化的语言环境信息。
});

export default i18n;

zh.ts en.ts

const en = {
  messages: {
  	"example": "example",
  	}
  }
export default en;
const zhCN = {
  messages: {
  	"example": "示例",
  	}
  }
export default zhCN;

main.ts

//ts还是js,具体要看项目语法进行引入
import i18n from './lang/i18n';

app.use(i18n);
app.mount('#app');

3.使用翻译模板的语法

在templete中使用

 <span>{{ $t("messages.upload") }}</span>  //需带{{}}
 <span :label="$t("messages.upload")"></span>//正常属性写法
 <span>{{ state.name }}</span>
 <script setup>
 import { reactive } from 'vue';
  	import { useI18n } from "vue-i18n";
	const { locale } = useI18n();
	let state =reactive( {
		name:t('messages.upload')
	})
 </script>

在路由内使用,更改title

import i18n from '@/lang/i18n.ts'
const t = i18n.global.t;


export const conRoutes = [
{
  path: '/example',
  title: t('messages.example'),
}
]
  • 1
    点赞
  • 1
    收藏
    觉得还不错? 一键收藏
  • 4
    评论
评论 4
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值