多语言

框架已集成vue-i18n，已配置的语言有中文简体、中文繁体、英文。

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

使用

/src/i18n 目录下有 lang 和 pages 两个目录

lang 中定义了开发框架时使用的文本

业务开发中可以将文本定义在 pages 目录下，按模块或按页面创建，更方便管理。

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

{
  "system": {
    "menu": "Menu"
  },
}

{
  "system": {
    "menu": "菜单"
  },
}

{
  "system": {
    "menu": "菜單"
  },
}

在<template>中使用

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

在 JavaScript 中使用

import i18n from '@/i18n'
const menuText = i18n.global.t('system.menu')
// 或
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.json

配置语言切换

// /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.js'
import zhTw from 'element-plus/dist/locale/zh-tw.js'
import en from 'element-plus/dist/locale/en.js'
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