技术文档

打开导航菜单

PIG AI Guide
============

切换主题搜索

[](https://wwads.cn/click/bait)[![](https://cdn.wwads.cn/creatives/9UFEBWm9yghqfP2A3Ri7GzEqF8ccpKj2J0fHzhS7.png)
](https://wwads.cn/click/bundle?code=4jQpSYno5LBbz49BkpNUvNEIyc5l09)

[电商项目必备！Java 开源商城系统 SpringBoot+Vue 框架，功能齐全，全源码交付，可二开](https://wwads.cn/click/bundle?code=4jQpSYno5LBbz49BkpNUvNEIyc5l09)[广告](https://wwads.cn/?utm_source=property-270&utm_medium=footer "点击了解万维广告联盟")

PIGX 技术指南
=========

适配 5.0 以上单体和微服务版本

PIGX 技术指南PIG

⌘K

参与开发

快速上手

前端部分

浏览器兼容性前端配置项说明前端ENV环境配置前端目录结构前端首页组件开发前端国际化配置前端字体图标配置前端图表功能前端权限管理前端数据状态管理前端组件路由管理前端标签页管理前端字典工具使用前端参数工具使用前端通用工具函数省市区街四级联动组件前端代码编辑组件前端富文本组件前端表格组件前端表格分页组件前端表格工具栏组件前端上传组件前端左侧查询树前端文字提示组件前端悬浮输入组件前端组织架构组件前端标签列表组件前端表单校验

功能使用

后端部分

扩展必看

生产部署

社区分享

更新日志

更新日期: 2025-10-23

最后更新: 2025/10/23

切换主题

前端国际化配置
=======

框架内置 `中文简体`、`英文`

### [](#1-多国语言配置)1\. 多国语言配置

##### [](#前端配置国际化)前端配置国际化

注意：页面国际化数据最好放 `同级的目录中 i18n` 里。`/@/i18n` 为框架内置，为了更好的升级，最好别添加到里面

![](https://minio.pigx.top/oss/202304/1681629726.png)

##### [](#后端配置国际化)后端配置国际化

与前端 i18n 配置 ts 文件格式相同，i18n 可以通过后台进行国际化管理的配置和使用。

![](https://minio.pigx.top/oss/202304/1682143507.png)

### [](#2-国际化使用)2\. 国际化使用

#### [](#页面上使用-vuetxxxxxx)页面上使用 `.vue`，`$t('xxx.xxx')`

```


`<el-button>   <span>{{ $t('message.account.accountBtnText') }}</span>  </el-button>  
<el-divider  content-position="left">   {{ $t('message.layout.oneTitle') }}
</el-divider>`




```

#### [](#ts-上使用-tsi18nglobaltxxx)ts 上使用 `.ts`，`i18n.global.t(xxx)`

```


`import  { i18n }  from  "/@/i18n/index";  
const webTitle = i18n.global.t(router.currentRoute.value.meta.title  as  any);`




```

#### [](#setup-里使用-txxx)setup 里使用 ，`t(xxx)`

```


`<script lang="ts">  import  { defineComponent }  from  'vue';  import  { useI18n }  from  'vue-i18n';  
export  default  defineComponent({  name:  'xxx',   setup()  {   const  { t }  =  useI18n();  
  // 使用，xxx 为变量   t(xxx)   }  })  </script>`




```

[](#框架其它国际化)框架其它国际化
-------------------

### [](#1-菜单)1\. 菜单

![](https://minio.pigx.vip/oss/202510/FC7lef.png)

[/@/layout/navMenu](#/src/layout/navMenu)，取 [/@/router/route.ts](#/src/router/route.ts) 中的 `meta.title` 字段（`message.router.xxx` 需提前在 PC 后台 【国际化管理】中维护，中文菜单和英文的对应关系。

### [](#2-浏览器标题)2\. 浏览器标题

> [/@/utils/other.ts](#/src/utils/other.ts#L28) useTitle 方法，使用时：`other.useTitle()`

```


``/**
 * 设置浏览器标题国际化 * @method const title = useTitle(); ==> title() */  export  function  useTitle()  {   const stores =  useThemeConfig(pinia);   const  { themeConfig }  =  storeToRefs(stores);   nextTick(()  =>  {   let webTitle =  "";   let globalTitle:  string  = themeConfig.value.globalTitle;   const  { path, meta }  = router.currentRoute.value;   if  (path ===  "/login")  {  webTitle =  <string>meta.title;   }  else  {  webTitle =  setTagsViewNameI18n(router.currentRoute.value);   }   document.title  =  `${webTitle} - ${globalTitle}`  || globalTitle;   });  }``




```

### [](#3-顶栏)3\. 顶栏

[/@/layout/navBars/breadcrumb](#/src/layout/navBars/breadcrumb)，面包屑、组件大小、语言切换、菜单搜索、布局配置、消息、开/关全屏、用户下拉菜单（鼠标放入 `icon 图标` 上会显示图标说明）。

基本都使用 `$t(xxx.xxx.xxx)` 语法。

```


`<div>{{ $t(v.meta.title) }}</div>`




```

### [](#4-布局配置)4\. 布局配置

[/@/layout/navBars/breadcrumb/setings.vue](#/src/layout/navBars/breadcrumb/setings.vue)，国际化数据在 [/@/i18n/lang](#/src/i18n/lang) 中的 `layout` 对象。基本上使用 `$t('message.layout.xxx')` 语法

```


`<div  class="layout-breadcrumb-seting-bar-flex-label">   {{ $t('message.layout.twoMenuBar') }}
</div>`




```

### [](#5-页面)5\. 页面

基本上使用 `$t('message.xxx.xxx')` 语法

### 本页导航

1\. 多国语言配置

前端配置国际化

后端配置国际化

2\. 国际化使用

页面上使用 .vue，$t('xxx.xxx')

ts 上使用 .ts，i18n.global.t(xxx)

setup 里使用 ，t(xxx)

框架其它国际化

1\. 菜单

2\. 浏览器标题

3\. 顶栏

4\. 布局配置

5\. 页面