若依前后端分离版实现前端国际化步骤

提示：文章写完后，目录可以自动生成，如何生成可参考右边的帮助文档

---

前言

提示：这里可以添加本文要记录的大概内容：

随着国际间越来越多的交流，我们的系统走向国际，需要用到一个常用的技术——国际化，接下来我就给各位介绍一下怎么实现国际化，让初学者少走弯路。

---

一、前置条件

1.1 安装插件

Vue3需要指定版本9

npm install vue-i18n@9

1.2 添加国际化相关文件

src文件夹下新建language文件
添加文件
en.js
ch.js
index.js
内容
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',系统监控: 'monitor',在线用户: 'online',定时任务: 'scheduled',数据监控: 'dataMonitor',服务监控: 'serviceMonitor',缓存监控: 'cacheMonitor',缓存列表: 'cacheList'}
}

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}
})
export default i18n

创建后如下：

1.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')

1.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>

1.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>

1.6 在对应的组件中使用定义的语言类型即可实现语言的切换，登录页面使用：

src/views/login.vue

<template><div class="app-container home"><p> {{$t('home.welcome')}}</p><img src="src/assets/images/auborobottest.png"></div>
</template>

效果图：

二、路由菜单国际化

2.1 src/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>

2.2 修改src/layout/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;
}

效果如下：

2.3 面包屑国际化

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

效果图如下：

2.4 顶部组件

src/layout/components/TagsView/index.vue

<!-- src/layout/components/TagsView/index.vue -->
<template><div id="tags-view-container" class="tags-view-container"><scroll-pane ref="scrollPane" class="tags-view-wrapper"><router-linkv-for="tag in visitedViews"ref="tag":key="tag.path":class="isActive(tag)?'active':''":to="{ path: tag.path, query: tag.query, fullPath: tag.fullPath }"tag="span"class="tags-view-item"@click.middle.native="!isAffix(tag)?closeSelectedTag(tag):''"@contextmenu.prevent.native="openMenu(tag,$event)"><!-- 这里显示标签标题 -->{{ generateTitle(tag.title) }}<span v-if="!isAffix(tag)" class="el-icon-close" @click.prevent.stop="closeSelectedTag(tag)" /></router-link></scroll-pane></div>
</template><script setup>
import { generateTitle } from '@/utils/i18n' // 导入翻译函数// 原有的业务逻辑...// 在模板中已经使用了 generateTitle(tag.title)
</script>

2.5 创建/检查工具函数

确保 src/utils/i18n.js 文件存在：

// src/utils/i18n.js
import i18n from '@/language/index.js'export function generateTitle(title) {const hasKey = i18n.global.te('menus.' + title)if (hasKey) {return i18n.global.t('menus.' + title)}return title
}

效果如下：

总结

以上就是ruoyi前后端分离版前端实现国际化的过程，希望对读者有帮助。