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'),
}
]