国际化(I18n)

提示

系统已经完成了国际化的基础,只需要配置相对应的语言包即可实现国际化多语言功能

注意:前端和后端有各自的语言包

前端多语言

  • 前端的多语言包目录:src/i18n,默认自带了 zh_CNen
  • 前端语言包按不同的功能建立了不同的文件
  • 菜单的语言包文件为 menu.js 新增的菜单可在此文件添加对应的语言

新建多语言文件

src/i18n/zh_CN/foo.jssrc/i18n/en/foo.js

// zh_CN/foo.js
export default {
    name: '演示示例'
}

// en/foo.js
export default {
    name: 'demo example'
}

使用

src/views/system/foo/index.vue

<!-- 模板里使用 -->
<template>
    <div>{{ $t('foo.name') }}</div>
</template>

<!-- script里使用 -->
<script setup>
// 载入
import { useI18n } from 'vue-i18n'
const { t } = useI18n()

// 使用
const name = t('foo.name')
</script>

后端多语言

  • 后端的多语言包目录:stroage/languages,默认自带了 zh_CNen
  • 后端语言包按不同的功能建立了不同的文件

新建多语言文件

stroage/languages/zh_CN/foo.phpstroage/languages/en/foo.php

// zh_CN/foo.php
return [
    'name' => '演示示例',
];

// en/foo.php
return [
    'name' => 'demo example',
];

使用

  • 后端封装了专门的多语言 t() 函数,可在任何地方调用
$name = t('foo.name');