多语言

提示

FiveAdmin提供了开箱即用的多语言配置，已配置的有中文简体、中文繁体、英文。

如果这些不能满足你的需求，请查看如何配置

使用

FiveAdmin提供了开箱即用的多语言配置，已配置的有中文简体、中文繁体、英文。使用起来很简单，你只需要在 /src/i18n/pages/ 下新建一个目录并创建对应语言文本文件即可。目录名随意，文件名必须是en.js、zh-cn.js、zh-tw.js

src
├─i18n
│  └─pages
│      └─system // 目录名称随意，建议和你的页面或模块同名，方便查找
│          └─en.js  // 英文文本
│          ├─zh-cn.js // 中文简体文本
│          └─zh-tw.js // 中文繁体文本

export default {
  system: {
    menu: 'Menu',
  },
}

export default {
  system: {
    menu: '菜单',
  },
}

export default {
  system: {
    menu: '菜單',
  },
}

在<template>中使用

<span>{{ $t('system.menu') }}</span>

在 JavaScript 中使用

import { t } from '@/i18n'
const menuText = t('system.menu')

配置

如果已有的配置不能满足你的需求，这里介绍如何新增或删除一个语言配置

// /src/i18n/index.js

// 定义多语言文本
const messages = {
  // 'en': {}, 删除英文
  'zh-cn': {},
  'zh-tw': {},
  'zh-cn1':{}, // 新增 zh-cn1 语言
}

这样就简单的新增了一个 zh-cn1 语言并且删除了一个 en 语言。语言文本文件名必须为 zh-cn1.js

配置语言切换

// /src/appConfig.js

export const defaultLanguages = [
  { label: '中文简体', value: 'zh-cn' },
  { label: '中文繁体', value: 'zh-tw' },
  { label: '新增加的语言', value: 'zh-cn1' }, // 新增 zh-cn1 语言
//   { label: 'EN', value: 'en' }, // 删除英文
]
export default {
  // 你也可以在这里将 zh-cn1 设为应用的默认语言
  // 语言设置会缓存在浏览器的localStorage，如果设置默认语言不生效请清空缓存
  defaultLanguage: 'zh-cn1', 
}

ElementPlus国际化配置

本项目与 ElementPlus 语言同步切换需要在这里配置 ElementPlus 语言

语言文本由 ElementPlus 提供，ElementPlus国际化

// /src/hooks/useElementI18n.js

import zhCn from 'element-plus/dist/locale/zh-cn.mjs'
import zhTw from 'element-plus/dist/locale/zh-tw.mjs'
import en from 'element-plus/dist/locale/en.mjs'
import { computed } from 'vue'
import { useAppStore } from '@/stores/modules/app'

export default function useElementI18n() {
  const useApp = useAppStore()
  const locale = computed(() => {
    return useApp.appConfig.defaultLanguage === 'zh-cn' 
    ? zhCn : useApp.appConfig.defaultLanguage === 'zh-tw' 
    ? zhTw : en
  })
  return { locale }
}

了解更多

vue-i18n