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;}
};