国际化(I18n)
提示
系统已经完成了国际化的基础,只需要配置相对应的语言包即可实现国际化多语言功能
注意:前端和后端有各自的语言包
前端多语言
- 前端的多语言包目录:
src/i18n
,默认自带了zh_CN
和en
- 前端语言包按不同的功能建立了不同的文件
- 菜单的语言包文件为
menu.js
新增的菜单可在此文件添加对应的语言
新建多语言文件
src/i18n/zh_CN/foo.js
和 src/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_CN
和en
- 后端语言包按不同的功能建立了不同的文件
新建多语言文件
stroage/languages/zh_CN/foo.php
和 stroage/languages/en/foo.php
// zh_CN/foo.php
return [
'name' => '演示示例',
];
// en/foo.php
return [
'name' => 'demo example',
];
使用
- 后端封装了专门的多语言
t()
函数,可在任何地方调用
$name = t('foo.name');