若依前后端分离版国际化（vue3）

为了满足不同地区用户使用需求，软件需要提供多种语言支持。在 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;
}

效果图：