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

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

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

前言
一、前置条件
- [1.1 安装插件](#1.1 安装插件)
- [1.2 添加国际化相关文件](#1.2 添加国际化相关文件)
- [1.3 mian.js 引入 i18n 配置文件](#1.3 mian.js 引入 i18n 配置文件)
- [1.4 增加语言设定组件](#1.4 增加语言设定组件)
- [1.5 导航栏增加语言切换](#1.5 导航栏增加语言切换)
- [1.6 在对应的组件中使用定义的语言类型即可实现语言的切换，登录页面使用：](#1.6 在对应的组件中使用定义的语言类型即可实现语言的切换，登录页面使用：)
二、路由菜单国际化
- [2.1 src/APP.vue增加element-plus](#2.1 src/APP.vue增加element-plus)
- [2.2 修改src/layout/components/Sidebar/SidebarItem.vue文件设定title增加menusTitle指定语言](#2.2 修改src/layout/components/Sidebar/SidebarItem.vue文件设定title增加menusTitle指定语言)
- [2.3 面包屑国际化](#2.3 面包屑国际化)
- [2.4 顶部组件](#2.4 顶部组件)
- [2.5 创建/检查工具函数](#2.5 创建/检查工具函数)
总结

前言

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

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

一、前置条件

1.1 安装插件

Vue3需要指定版本9

bash 复制代码

npm install vue-i18n@9

1.2 添加国际化相关文件

src文件夹下新建language文件

添加文件

en.js

ch.js

index.js

内容

ch.js

bash 复制代码

export default  {
    home:{
        welcome: "欢迎使用若依"
    },
    menus: {
        首页: '首页',
        系统管理: '系统管理',
        用户管理: '用户管理',
        角色管理: '角色管理',
        菜单管理: '菜单管理',
        部门管理: '部门管理',
        岗位管理: '岗位管理',
        字典管理: '字典管理',
        参数设置: '参数设置',
        通知公告: '通知公告',
        日志管理: '日志管理',
        操作日志: '操作日志',
        登录日志: '登录日志',
        系统监控: '系统监控',
        在线用户: '在线用户',
        定时任务: '定时任务',
        数据监控: '数据监控',
        服务监控: '服务监控',
        缓存监控: '缓存监控',
        缓存列表: '缓存列表'
    }
}

en.js

bash 复制代码

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

bash 复制代码

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 配置文件

bash 复制代码

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增加语言设定组件

bash 复制代码

<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中增加语言切换下拉框，导入上述语言设定组件

bash 复制代码

<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

bash 复制代码

<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

bash 复制代码

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

bash 复制代码

<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 使用语言设定组件

bash 复制代码

<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

bash 复制代码

<!-- 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-link
        v-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 文件存在：

bash 复制代码

// 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前后端分离版前端实现国际化的过程，希望对读者有帮助。

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

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

前言

一、前置条件

1.1 安装插件

1.2 添加国际化相关文件

1.3 mian.js 引入 i18n 配置文件

1.4 增加语言设定组件

1.5 导航栏增加语言切换

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

二、路由菜单国际化

2.1 src/APP.vue增加element-plus

2.2 修改src/layout/components/Sidebar/SidebarItem.vue文件设定title增加menusTitle指定语言

2.3 面包屑国际化

2.4 顶部组件

2.5 创建/检查工具函数

总结