第十章：国际化

介绍

saiadmin 支持多语言，默认支持中文和英文。是基于 vue-i18n 集成的。

如何配置

文件位于 src/i18n 目录，其中的 en 和 zh 分别代表英文和中文。

假设我们现在配置某个菜单按钮的国际化配置：

1. 在 src/i18n/en/menus.js 中添加英文配置：

export default {
  // 首页菜单
  'home': 'Home',
  'dashboard': 'Dashboard',
  'userCenter': 'User Center',
  'message': 'Message Center',
  'setting:config': 'System Setting',
  'demo': 'Component Demo',
}

2. 在 src/i18n/zh/menus.js 中添加中文配置：

export default {
  // 首页菜单
  'home': '首页',
  'dashboard': '仪表盘',
  'userCenter': '个人中心',
  'message': '消息中心',
  'setting:config': '系统配置',
  'demo': '组件演示',

如何使用

• 在vue的 template 页面中，通过以下方式使用

<template>
  <span>{{ $t('menus.home') }}</span>
</template>

这样，在页面中，如果当前模式是中文，则显示为 首页，如果当前模式是英文，则显示为 Home。

• 在vue的 script 页面中，通过以下方式使用

<script setup>
  import { useI18n } from 'vue-i18n'

  const { t } = useI18n()

  const title = ref('')

  title.value = t('menus.home')

</script>