Vue3多语言实现

1.首先安装i18n 

npm install vue-i18n

2.在项目下创建lang目录并创建en.ts,i18n1.ts,zh.ts

en.ts 

export default {
    message: {
     home: 'home',
     appTitle:'aa 3D Smart Measure'
    },    
    Menus: {
      Measuer: 'Measure',
 
     },
     GlueMeasure: {
      Title: 'Camera 3D Glue Measure',
 
     }
  }

zh.ts

export default {
    message: {
     home: 'home',
     appTitle:'aa 3D智能测量'
    },    
    Menus: {
      Measuer: '测量',
 
     }, 
     GlueMeasure: {
      Title: '3D相机 涂胶测量',
 
     }
  }

i18n1.ts

import { createI18n } from "vue-i18n";
import en from './en'
import zh from './zh';
 
const i18n = createI18n({
  locale:localStorage.getItem('language') || 'zh', // 默认是中文
  fallbackLocale: 'zh',
  globalInjection:true,//全局配置$t
  legacy:false,
  messages:{en,zh}// 需要做国际化的语种
 
})
 
export default i18n 

3.在main.ts中配置

import i18n from './lang/i18n1'

app.use(i18n)

4.在标签中使用 {{ $t('message.appTitle') }}

			<el-text class="mx-1" type="info">
				<span style="color: white;font-size: xx-large;">{{ $t('message.appTitle') }}</span>
			</el-text>

5.在代码中使用方法 t("Menus.Measuer")

<script setup lang="ts">
import { computed } from 'vue';
import { useSidebarStore } from '../store/sidebar';
import { useRoute } from 'vue-router';
import i18n from '../lang/i18n1';

const t = i18n.global.t

const items = [
	{
		icon: 'CameraFilled',
		index: '1',
		title: t("Menus.Measuer"), 
		permiss: '4',
		subs: [
			{
				index: '/SystemLog',
				title: 'Log',
				permiss: '17',
			},

6.实现语言切换

				<el-dropdown class="user-name" trigger="click" @command="LanguageCommand">
					<span class="el-dropdown-link">
						{{ CurrentLanguage }}
						<el-icon class="el-icon--right">
							<arrow-down />
						</el-icon>
					</span>
					<template #dropdown>
						<el-dropdown-menu> 
							<el-dropdown-item command="zh">中文</el-dropdown-item>
							<el-dropdown-item divided command="en">English</el-dropdown-item> 
						</el-dropdown-menu> 
					</template>
				</el-dropdown>

const LanguageCommand = (command: string) => {
	console.log(command)
	localStorage.removeItem('language')
	localStorage.setItem('language', command)
	window.location.reload()

	switch (command) {
		case 'zh':
			CurrentLanguage.value = "中文"

			break;
		case 'en':
			CurrentLanguage.value = "English"
			break;
	}
};