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

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

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

首先，我们先来看一下后台项目的通用功能都有哪些

1、国际化

2、动态换肤

3、全屏

4、搜索

5、标签

6、引导

那么下边我们就来一个一个的看一下

国际化实现原理

我们先来看一个需求

我们有一个变量 msg，但是这个 msg 有且只有两个值
1、hello world
2、你好世界
要求：根据需要切换 msg 的值

类似这样的需求就是国际化，针对这个需求我们可以使用如下代码进行处理

<script>
  // 1. 定义 msg 值的数据源
  const messages = {
    en: {
      msg: 'hello world'
    },
    zh: {
      msg: '你好世界'
    }
  }
  // 2. 定义切换变量
  let locale = 'en'
  // 3. 定义赋值函数
  function t(key) {
    return messages[locale][key]
  }
  // 4. 为 msg 赋值 
  let msg = t('msg')
  console.log(msg);
  // 修改 locale， 重新执行 t 方法，获取不同语言环境下的值

</script>

总结：
1、通过一个变量控制语言环境
2、所有语言环境下的数据源要预先定义好
3、通过一个方法获取当前语言下指定属性的值
4、该值即为国际化下展示的值

基于 vue-i18n V9 的国际化实现方案分析

在 vue 项目中，我们不需要手写这么复杂的基础代码，可以直接使用 vue-i18n 进行实现（注：vue3 下需要使用 V9.x 的 i18n）

vue-i18n 的使用可以分为四个部分

1、创建 message 数据源

2、创建 locale 语言变量

3、初始化 i18n 实例

4、注册 i18n 实例

下边我们就来实现一下

1、安装 vue-i18n

npm install vue-i18n@next

2、创建 i18n/index.js 文件

3、创建 message 数据源

const messages = {
  en: {
    msg: {
      test: 'hello world'
    }
  },
  zh: {
    msg: {
      test: '你好世界'
    }
  }
}

4、创建 locale 语言变量

const locale = 'en'

5、初始化 i18n 实例

import { createI18n } from 'vue-i18n'

const i18n = createI18n({
  // 使用 Composition API 模式，则需要将其设置为false
  legacy: false,
  // 全局注入 $t 函数
  globalInjection: true,
  locale,
  messages
})

6、把 i18n 注册到 vue 实例

export default i18n

7、在 main.js 中导入

// i18n （PS：导入放到 APP.vue 导入之前，因为后面我们会在 app.vue 中使用国际化内容）
import i18n from '@/i18n'
app.use(i18n)

8、在 layout/components/Side 中使用 i18n

<h1 class="logo-title" v-if="$store.getters.sidebarOpened">
  {{ $t('msg.test') }}
</h1>

9、修改 locale 的值，即可改变展示的内容

以上就是 i18n 的基础用法，下一篇中我们将看一看在项目中如何使用 i18n 完成国际化