当前位置:   article > 正文

若依前后端分离版国际化(vue3)_若依vue3

若依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
  • 1

yarn add vue-i18n@9
  • 1

2.2.添加国际化相关文件
src文件夹下新建language文件
在这里插入图片描述
ch.js

export default  {
    home:{
        welcome: "欢迎使用若依"
    },
    menus: {
        首页: '首页',
        系统管理: '系统管理',
        用户管理: '用户管理',
        角色管理: '角色管理',
        菜单管理: '菜单管理',
        部门管理: '部门管理',
        岗位管理: '岗位管理',
        字典管理: '字典管理',
        参数设置: '参数设置',
        通知公告: '通知公告',
        日志管理: '日志管理',
        操作日志: '操作日志',
        登录日志: '登录日志'
    }
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13
  • 14
  • 15
  • 16
  • 17
  • 18
  • 19

en.js

export default  {
home:{
        welcome: "Welcome to Ruoyi"
    },
    menus: {
        首页: 'home',
        系统管理: 'system',
        用户管理: 'user',
        角色管理: 'role',
        菜单管理: 'menu',
        部门管理: 'dept',
        岗位管理: 'post',
        字典管理: 'dict',
        参数设置: 'config',
        通知公告: 'notice',
        日志管理: 'log',
        操作日志: 'operateLog',
        登录日志: 'loginLog'
    }
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13
  • 14
  • 15
  • 16
  • 17
  • 18
  • 19

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
    }
})
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13
  • 14

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')
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7

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>
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13
  • 14
  • 15
  • 16
  • 17
  • 18
  • 19
  • 20
  • 21
  • 22
  • 23
  • 24
  • 25
  • 26
  • 27
  • 28
  • 29
  • 30
  • 31
  • 32
  • 33
  • 34
  • 35
  • 36
  • 37
  • 38
  • 39
  • 40
  • 41
  • 42
  • 43
  • 44
  • 45
  • 46

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>
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7

在这里插入图片描述

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

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

效果图:
英文
简体中文

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>
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13
  • 14
  • 15
  • 16
  • 17
  • 18
  • 19
  • 20
  • 21

修改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;
}
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13

效果图
英文效果图
中文效果图
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;
}
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13
  • 14
  • 15
  • 16
  • 17
  • 18
  • 19

顶部组件
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;
}
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13
  • 14
  • 15
  • 16
  • 17
  • 18
  • 19
  • 20
  • 21
  • 22
  • 23
  • 24

效果图:
英文
简体中文

声明:本文内容由网友自发贡献,不代表【wpsshop博客】立场,版权归原作者所有,本站不承担相应法律责任。如您发现有侵权的内容,请联系我们。转载请注明出处:https://www.wpsshop.cn/w/代码探险家/article/detail/948648
推荐阅读
相关标签
  

闽ICP备14008679号