赞
踩
为了满足不同地区用户使用需求,软件需要提供多种语言支持。在 vue 项目中使用最多的就是 i18n 插件来实现多语言的切换功能。
1.插件框架
vue-i18n 作为国际化插件,它主要有两个版本:v8 和 v9。v8 版本适用于 Vue2 框架,v9 版本适用于 Vue3 框架。具体区别可以查看 官网https://vue-i18n.intlify.dev/ ,以下内容均在 Vue3 中使用。
2.若依集成国际化插件i18n在这里插入代码片
2.1.安装插件
Vue3需要指定版本9
npm install vue-i18n@9
或
yarn add vue-i18n@9
2.2.添加国际化相关文件
src文件夹下新建language文件
ch.js
export default { home:{ welcome: "欢迎使用若依" }, menus: { 首页: '首页', 系统管理: '系统管理', 用户管理: '用户管理', 角色管理: '角色管理', 菜单管理: '菜单管理', 部门管理: '部门管理', 岗位管理: '岗位管理', 字典管理: '字典管理', 参数设置: '参数设置', 通知公告: '通知公告', 日志管理: '日志管理', 操作日志: '操作日志', 登录日志: '登录日志' }
en.js
export default { home:{ welcome: "Welcome to Ruoyi" }, menus: { 首页: 'home', 系统管理: 'system', 用户管理: 'user', 角色管理: 'role', 菜单管理: 'menu', 部门管理: 'dept', 岗位管理: 'post', 字典管理: 'dict', 参数设置: 'config', 通知公告: 'notice', 日志管理: 'log', 操作日志: 'operateLog', 登录日志: 'loginLog' }
index.js
import {createI18n} from 'vue-i18n'
import ch from './ch.js'
import en from './en.js'
const i18n = createI18n({
legacy: false,
globalInjection: true,
locale: localStorage.getItem('lang') || 'cn',
messages: {
ch,
en
}
})
2.3.mian.js 引入 i18n 配置文件
import { createApp } from 'vue'
import App from './App.vue'
import i18n from './language/index.js'
const app = createApp(App)
app.use(i18n)
app.mount('#app')
2.4 增加语言设定组件
src/components/LanguageSet/index.vue增加语言设定组件
<template> <el-dropdown trigger="click" @command="handleSetLanguage"> <div class="language-icon--style"> <svg-icon class-name="language-icon" icon-class="language" /> </div> <template #dropdown> <el-dropdown-menu slot="dropdown"> <el-dropdown-item v-for="item of languageOptions" :key="item.value" :disabled="language === item.value" :command="item.value"> {{ item.label }} </el-dropdown-item> </el-dropdown-menu> </template> </el-dropdown> </template> <script setup> import useAppStore from "@/store/modules/app"; import en from "element-plus/es/locale/lang/en"; import cn from "element-plus/es/locale/lang/zh-cn"; const appStore = useAppStore(); const { proxy } = getCurrentInstance(); const language = ref(localStorage.getItem('lang') === 'en' ? en : cn); const languageOptions = ref([ { label: "简体中文", value: "ch" }, { label: "English", value: "en" }, ]); function handleSetLanguage(lang) { language.value = lang; localStorage.setItem('lang', language.value) //刷新浏览器 location.reload(); } </script> <style lang='scss' scoped> .language-icon--style { font-size: 18px; line-height: 50px; padding-right: 7px; } </style>
2.5 导航栏增加语言切换
layout/src/components/Navbar.vue中增加语言切换下拉框,导入上述语言设定组件
<el-tooltip content="语言选择" effect="dark" placement="bottom">
<language-set id="language-set" class="right-menu-item hover-effect" />
</el-tooltip>
<script setup>
import LanguageSet from '@/components/LanguageSet'
</script>
2.6 在对应的组件中使用定义的语言类型即可实现语言的切换,首页中使用:
<template>
<div class="app-container home">
<p> {{$t('home.welcome')}}</p>
<img src="src/assets/images/auborobottest.png">
</div>
</template>
效果图:
3.左侧菜单实现国际化
APP.vue增加element-plus
<template> <el-config-provider :locale="language"> <router-view/> </el-config-provider> </template> <script setup> import useSettingsStore from '@/store/modules/settings' import { handleThemeStyle } from '@/utils/theme' import cn from 'element-plus/es/locale/lang/zh-cn'; import en from 'element-plus/es/locale/lang/en'; const language = ref(localStorage.getItem('lang') === 'en' ? en : cn); onMounted(() => { nextTick(() => { // 初始化主题样式 handleThemeStyle(useSettingsStore().theme) }) }) </script>
修改layout/src/components/Sidebar/SidebarItem.vue文件
设定title增加menusTitle指定语言
<template v-if="item.meta" #title>
<svg-icon :icon-class="item.meta && item.meta.icon"/>
<span class="menu-title" :title="hasTitle(item.meta.title)">{{ menusTitle(item.meta.title) }}</span>
</template>
import i18n from '@/language/index.js''
function menusTitle(item) {
if (i18n.global.te('menus.' + item)){
return i18n.global.t('menus.' + item);
}
return item;
}
效果图
4.面包屑国际化
src/components/Breadcrumb/index.vue 使用语言设定组件
<template> <el-breadcrumb class="app-breadcrumb" separator="/"> <transition-group name="breadcrumb"> <el-breadcrumb-item v-for="(item,index) in levelList" :key="item.path"> <span v-if="item.redirect === 'noRedirect' || index == levelList.length - 1" class="no-redirect">{{ menusTitle(item.meta.title) }}</span> <a v-else @click.prevent="handleLink(item)">{{ menusTitle(item.meta.title)}}</a> </el-breadcrumb-item> </transition-group> </el-breadcrumb> </template> <script setup> import i18n from '@/language/index.js' function menusTitle(item) { if (i18n.global.te('menus.' + item)){ return i18n.global.t('menus.' + item); } return item; }
顶部组件
src/components/TopNav/index.vue 使用语言设定组件
<template> <el-breadcrumb class="app-breadcrumb" separator="/"> <transition-group name="breadcrumb"> <el-breadcrumb-item v-for="(item,index) in levelList" :key="item.path"> <span v-if="item.redirect === 'noRedirect' || index == levelList.length - 1" class="no-redirect">{{ menusTitle(item.meta.title) }}</span> <a v-else @click.prevent="handleLink(item)">{{ menusTitle(item.meta.title)}}</a> </el-breadcrumb-item> </transition-group> </el-breadcrumb> </template> <script setup> import i18n from '@/language/index.js' const route = useRoute(); const router = useRouter(); const levelList = ref([]) function menusTitle(item) { if (i18n.global.te('menus.' + item)){ return i18n.global.t('menus.' + item); } return item; }
效果图:
Copyright © 2003-2013 www.wpsshop.cn 版权所有,并保留所有权利。