【若依】若依框架中实现国际化多语言切换的步骤

---

前言

若依框架，要实现国际化多语言切换，在 vue 项目中使用最多的就是 i18n 插件来实现多语言的切换功能。

一、vue-i18n插件

vue-i18n 作为国际化插件，它主要有两个版本：v8 和 v9。v8 版本适用于 Vue2 框架，v9 版本适用于 Vue3 框架。具体区别可以查看官网https://vue-i18n.intlify.dev/ ，以下内容均在 Vue3 中使用。

二、若依框架集成国际化插件i18n

1、安装插件

Vue3需要指定版本9。

前端项目终端中运行命令，进行插件安装：

npm install vue-i18n@9

或

yarn add vue-i18n@9

2、若依框架添加国际化插件相关文件

1）src文件夹下新建language文件

ch.js

export default  {home:{welcome: "欢迎使用若依",name:"XXX管理系统"},menus: {首页: '首页',系统管理: '系统管理',用户管理: '用户管理',角色管理: '角色管理',菜单管理: '菜单管理',部门管理: '部门管理',岗位管理: '岗位管理',字典管理: '字典管理',参数设置: '参数设置',通知公告: '通知公告',日志管理: '日志管理',操作日志: '操作日志',登录日志: '登录日志'}

en.js

export default  {
home:{welcome: "Welcome to Ruoyi",name:"XXXManagement System"},menus: {首页: 'home',系统管理: 'system',用户管理: 'user',角色管理: 'role',菜单管理: 'menu',部门管理: 'dept',岗位管理: 'post',字典管理: 'dict',参数设置: 'config',通知公告: 'notice',日志管理: 'log',操作日志: 'operateLog',登录日志: 'loginLog'}

第三种语言的js文件同理。

index.js

import  {createI18n} from 'vue-i18n'
import ch from './ch.js'
import en from './en.js'
import ru from './ru.js'const i18n = createI18n({legacy: false,globalInjection: true,locale: localStorage.getItem('lang') || 'cn',messages: {ch,en,ru}
})export default i18n

2）main.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')

但这里注意，如果一些语句main.js中已经有了，就不要重复添加。我只在文件中加了如下代码，因为其他语句已经有了。

// 多语言组件
//import { createApp } from 'vue'
// import App from './App.vue'import i18n from './language/index.js'
app.use(i18n)

3）增加语言设定组件

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>

但是这里需注意，要根据自己项目情况做一些微小调整，我调整后的代码如下：

<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";
import ru from "element-plus/es/locale/lang/ru";const appStore = useAppStore();
const { proxy } = getCurrentInstance();const savedLang = localStorage.getItem('lang')
const language = ref(savedLang === 'en' ? en :savedLang === 'ru' ? ru :cn // 默认中文
)// 添加三语选项配置
const languageOptions = ref([{ label: '简体中文', value: 'ch' },{ label: 'English', value: 'en' },{ label: 'Русский', value: 'ru' }, // 三语
])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>

4）导航栏增加语言切换

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>

这里也可能需要做一点微调，我加后代码如下：

核心：

<header-search id="header-search" class="right-menu-item" /><language-set id="language-set" class="right-menu-item" /><screenfull id="screenfull" class="right-menu-item" />

整体：

<template><div class="navbar"><hamburger id="hamburger-container" :is-active="appStore.sidebar.opened" class="hamburger-container" @toggleClick="toggleSideBar" /><breadcrumb id="breadcrumb-container" class="breadcrumb-container" v-if="!settingsStore.topNav" /><top-nav id="topmenu-container" class="topmenu-container" v-if="settingsStore.topNav" /><div class="right-menu"><template v-if="appStore.device !== 'mobile'"><header-search id="header-search" class="right-menu-item" /><language-set id="language-set" class="right-menu-item" /><screenfull id="screenfull" class="right-menu-item" /><div class="avatar-container"><el-dropdown @command="handleCommand" class="right-menu-item hover-effect" trigger="click"><div class="avatar-wrapper"><img :src="userStore.avatar" class="user-avatar" />
<!--              <el-icon><caret-bottom /></el-icon>--></div><template #dropdown><el-dropdown-menu><router-link to="/user/profile"><el-dropdown-item>个人中心</el-dropdown-item></router-link><el-dropdown-item command="setLayout" v-if="settingsStore.showSettings"><span>布局设置</span></el-dropdown-item><el-dropdown-item divided command="logout"><span>退出登录</span></el-dropdown-item></el-dropdown-menu></template></el-dropdown></div></template></div></div></template>

5）左侧菜单实现国际化

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>

我这里稍作调整后如下，供参考：

<template xmlns:>
<!--  <router-view />--><!--  多语言修改--><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';
import ru from 'element-plus/es/locale/lang/ru';//const language = ref(localStorage.getItem('lang') === 'en' ? en : cn);const savedLang = localStorage.getItem('lang')
const language = ref(savedLang === 'en' ? en :savedLang === 'ru' ? ru :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;
}

我微调后如下：

<template><div v-if="!item.hidden"><template v-if="hasOneShowingChild(item.children, item) && (!onlyOneChild.children || onlyOneChild.noShowingChildren) && !item.alwaysShow"><app-link v-if="onlyOneChild.meta" :to="resolvePath(onlyOneChild.path, onlyOneChild.query)"><el-menu-item :index="resolvePath(onlyOneChild.path)" :class="{ 'submenu-title-noDropdown': !isNest }"><svg-icon :icon-class="onlyOneChild.meta.icon || (item.meta && item.meta.icon)"/><template #title><span class="menu-title" :title="hasTitle(onlyOneChild.meta.title)"><!-- 多语言 -->{{ menusTitle(onlyOneChild.meta.title) }}</span></template></el-menu-item></app-link></template><el-sub-menu v-else ref="subMenu" :index="resolvePath(item.path)" teleported><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><sidebar-itemv-for="(child, index) in item.children":key="child.path + index":is-nest="true":item="child":base-path="resolvePath(child.path)"class="nest-menu"/></el-sub-menu></div>
</template>

效果图：

6）面包屑国际化

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

我微调后如下：

<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">{{ item.meta.title }}</span><a v-else @click.prevent="handleLink(item)">{{ item.meta.title }}</a></el-breadcrumb-item></transition-group></el-breadcrumb>
</template>

顶部组件
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;
}

我项目中如下：

<template><el-menu:default-active="activeMenu"mode="horizontal"@select="handleSelect":ellipsis="false"><template v-for="(item, index) in topMenus"><el-menu-item :style="{'--theme': theme}" :index="item.path" :key="index" v-if="index < visibleNumber"><svg-iconv-if="item.meta && item.meta.icon && item.meta.icon !== '#'":icon-class="item.meta.icon"/>{{ item.meta.title }}</el-menu-item></template><!-- 顶部菜单超出数量折叠 --><el-sub-menu :style="{'--theme': theme}" index="more" v-if="topMenus.length > visibleNumber"><template #title>更多菜单</template><template v-for="(item, index) in topMenus"><el-menu-item:index="item.path":key="index"v-if="index >= visibleNumber"><svg-iconv-if="item.meta && item.meta.icon && item.meta.icon !== '#'":icon-class="item.meta.icon"/>{{ item.meta.title }}</el-menu-item></template></el-sub-menu></el-menu>
</template>

效果图

7）组件页面中字符串切换

（1）html代码

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

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

效果图

（2）css文件

css文件中’用户名’这样的字符串切换，需要先导入vue-i18n,然后对字符串进行切换。

// 多语言
import { useI18n } from 'vue-i18n'
const { t } = useI18n()

css字符串的调用多语言格式为：

'欢迎你' 替换成t('home.welcome')

以上就完成了多语言的切换。

总结

核心步骤：整个过程围绕着安装插件、配置语言包、集成到项目、实现界面切换这几个核心步骤展开。
关键实现：

1. 语言包管理：通过 ch.js、en.js 等文件分别定义不同语言的键值对，集中管理所有需要国际化的文本。

2. 插件集成：在 main.js 中引入并挂载 i18n 实例，将其绑定到整个 Vue 应用上。

3. 界面切换：通过一个语言切换组件，修改 localStorage 中的语言标识，并通过页面刷新来应用新的语言设置。

4. 组件应用：在菜单、面包屑、页面内容等各个组件中，通过 {{ $t(‘key’) }} 或 t(‘key’) 的方式调用对应的语言文本。
   注意事项：文档中也提到了一些实际操作中的细节，比如根据项目情况微调代码、处理 CSS 中的硬编码字符串等，这些都是实现多语言时需要考虑的。