vue3 + Element-plus 开发后台管理系统（22）

携手创作，共同成长！这是我参与「掘金日新计划 · 8 月更文挑战」的第22天，点击查看活动详情

后台项目前端综合解决方案之通用功能开发

处理项目国际化内容

在处理好国际化语言包之后，接下来我们就可以应用国际化功能到我们的项目中

对于目前的项目而言，需要进行国际化处理的地方主要有

1、登录页面

2、navbar 区域

3、siderbar 区域

4、面包屑区域

我们下边就来一个一个处理

• 登录页面

login/index

<template>
  <div class="login-container">
      <div class="title-container">
        <h3 class="title">{{ $t('msg.login.title') }}</h3>
          <lang-select class="lang-select" effect="light"></lang-select>
      </div>
      <el-button
        type="primary"
        style="width: 100%; margin-bottom: 30px"
        :loading="loading"
        @click="handleLogin"
        >{{ $t('msg.login.loginBtn') }}</el-button
      >
      <div class="tips" v-html="$t('msg.login.desc')"></div>
    </el-form>
  </div>
</template>

<script setup>
import { useI18n } from 'vue-i18n'
// 验证规则
const i18n = useI18n()
const loginRules = ref({
  username: [
    {
      message: i18n.t('msg.login.usernameRule')
    }
  ],
})
</script>

login/rules

import i18n from '@/i18n'
export const validatePassword = () => {
  return (rule, value, callback) => {
    if (value.length < 6) {
      callback(new Error(i18n.global.t('msg.login.passwordRule')))
    } else {
      callback()
    }
  }
}

• navbar 区域

layout/components/navbar

<template>
  <div class="navbar">
    <el-dropdown>
      <div>
        <template #dropdown>
          <el-dropdown-menu class="user-dropdown">
            <router-link to="/">
              <el-dropdown-item> {{ $t('msg.navBar.home') }} </el-dropdown-item>
            </router-link>
            <a target="_blank" href="">
              <el-dropdown-item>{{ $t('msg.navBar.course') }}</el-dropdown-item>
            </a>
            <el-dropdown-item divided @click="logout">
              {{ $t('msg.navBar.logout') }}
            </el-dropdown-item>
          </el-dropdown-menu>
        </template>
      </el-dropdown>
    </div>
  </div>
</template>

components/langSelect/index

<el-tooltip :content="$t('msg.navBar.lang')" :effect="effect">
        
const handleSetLanguage = lang => {
  ElMessage.success(i18n.t('msg.toast.switchLangSuccess'))
}

• siderbar 区域

对于目前的 siderbar 而言，显示的文本是我们在路由表里的 title

<span>{{ title }}</span>

我们可以把 title 作为语言包内容的 key 进行处理

创建 utils/i18n 工具模块，用于将 title 转化为国际化内容

import i18n from '@/i18n'
export function generateTitle(title) {
  return i18n.global.t('msg.route.' + title)
}

在 layout/components/Sidebar/MenuItem.vue 中导入该方法

<template>
  <span>{{ generateTitle(title) }}</span>
</template>

<script setup>
import { generateTitle } from '@/utils/i18n'
</script>

最后修改下 sidebarHeader 的内容

<h1 class="logo-title" v-if="$store.getters.sidebarOpened">
  imooc-admin
</h1>

• 面包屑区域

在 components/Breadcrumb/index

<template>
  <!-- 不可点击项 -->
  <span v-if="index === breadcrumbData.length - 1" class="no-redirect">{{
    generateTitle(item.meta.title)
  }}</span>
  <!-- 可点击项 -->
  <a v-else class="redirect" @click.prevent="onLinkClick(item)">{{
    generateTitle(item.meta.title)
  }}</a>
</template>

<script setup>
import { generateTitle } from '@/utils/i18n'
</script>

国际化缓存处理

我们希望在页面刷新后，当前的国际化选择可以被保留，所以想要实现这个功能就需要进行国际化缓存处理

此处的缓存，我们依然通过两个方面进行

1、vuex 缓存

2、LocalStorage 缓存

只不过这里的缓存，我们已经在处理 langSelect 组件时进行了处理，所以此时我们只需要使用缓存下来的数据即可

在 i18n/index 中，创建 getLanguage 方法

import store from '@/store'
/**
 * 返回当前 lang
 */
function getLanguage() {
  return store && store.getters && store.getters.language
}

修改 createI18n 的 locale 为 getLanguage()

const i18n = createI18n({
  locale: getLanguage()
})