vue3 + i18n 中英文切换

第一步：安装vue-i18n

npm install vue-i18n

第二步：配置语言包及js文件

目录如下：

英文语言包 en.js

// lang/en.js - 英文语言包
export default {menu: {      库房管理: 'Warehouse Management',入库检测: 'Incoming Inspection',       设置: 'Settings'}};

中文语言包 zh-CN.js

// lang/zh.js - 中文语言包
export default {menu: {       库房管理: '库房管理',入库检测: '入库检测',       设置: '设置'}};

js配置文件（单独设置一个文件，方便其他地方引用，直接配置在main.js中在router中调用有问题未解决）

// 引入插件
import { createI18n } from 'vue-i18n'
// 引入语言包
import zh from './zh-CN'
import en from './en'// 自动设置多语言 默认选择浏览器系统语言
const navLang       = navigator.language;    //判断当前浏览器使用的语言
const localLang     = (navLang === 'zh-CN' || navLang === 'en-US') ? navLang : false;
let lang            = localStorage.getItem('language') || localLang || 'en-US';    //如果有存，取缓存的语言
// 创建 VueI18n 实例，并为 messages 和 locale 属性赋值
const i18n  = createI18n({legacy: false, //解决Not available in legacy modelocale: lang, // 设置语言类型messages:{'zh': zh, // 中文语言包'en': en // 英文语言包},silentTranslationWarn: true,globalInjection: true, // 全局注册$t方法
});
localStorage.setItem('language',lang);    //最后缓存当前使用的语言export default i18n

语言包的配置不尽相同，大家按自己项目中的需求合理配置即可，我的项目中是后台动态获取菜单（非动态路由）

第三步：调用

动态菜单的实现（组件中调用 全局变量 $t）

<el-menu:default-active="$route.path"class="el-menu-vertical-demo":collapse-transition="false":unique-opened=true:router="true"background-color="#F3F5FA"><el-menu-item :index="item.url" class="one-bj" v-for="(item,index) in menuList" @click="judge(item.menuId)"><i :class="item.icon"></i>&nbsp;<div class="pos">{{$t('menu.'+item.name)}}</div>         </el-menu-item></el-menu>

中英文切换按钮：

<button @click="changeLang">{{ language }}</button>

插件import

import i18n from '@/locales'
const { t,locale } =  i18n.global  //解构出t方法

//中英文切换
const route = useRoute()
const changeLang = () => {if(language.value == "中文"){language.value = "英文"locale.value = "zh"localStorage.setItem('language','zh'); document.title = t('menu.'+route.meta.title) + '-' + t('menu.'+'风味科学') //设置网页标题  //修改页面标题中英文切换}else {language.value = "中文"locale.value = "en"localStorage.setItem('language','en'); document.title = t('menu.'+route.meta.title) + '-' + t('menu.'+'风味科学') //设置网页标题}
}

以上为页面中的使用。

在router中的使用，同样需要先引入插件并导入用到的方法

直接路由中使用

 {path:'/home',name:'home',component:() => import('@/views/OverView.vue'),meta:{title:t('menu.'+'整体概览'),requireAuth:true}},

上述方法页面标题只有在刷新页面的时候会更改中英文，点击中英文切换按钮的时候并不会实时改变

所以我们需要在路由守卫中进行处理，同时配合按钮切换的时候document.title的改变

router.beforeEach((to,from,next)=>{const title = ( t('menu.'+to.meta.title) ? t('menu.'+to.meta.title) : "" ) + '-' + t('menu.'+'科学') //设置网页标题document.title = titleconst pathArr = ['/home',''] if(pathArr.indexOf(to.path) !== -1){if(localStorage.getItem('token')){next()}else{next("/login")}}else{next()}
}