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,//全局配置$tlegacy: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.tconst 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;}
};