JeeSite 快速开发平台
官方网站
    • 平台简介
    • 架构特点
    • 技术选型
    • 功能介绍
    • 安装部署
    • 常见问题
    • 目录结构
    • 更新日志
    • Vue 文档
    • BPM 文档
    • Cloud 文档
V4 演示
Vue 演示
💖联系
  • 我要提意见、文档纠错
  • JeeSite 代码库, 请⭐Star关注
  • JeeSite Vue 代码库, 请⭐关注
  • Spring Cloud 微服务架构
  • JeeSite 手机端/移动端
  • Flowable 中国式工作流
  • OAauth2 统一认证服务器
  • 政务内外网环境中间件
  • 访问 ThinkGem 官方博客
  • 点击进入,下拉查看动态
官方网站
    • 平台简介
    • 架构特点
    • 技术选型
    • 功能介绍
    • 安装部署
    • 常见问题
    • 目录结构
    • 更新日志
    • Vue 文档
    • BPM 文档
    • Cloud 文档
V4 演示
Vue 演示
💖联系
  • 我要提意见、文档纠错
  • JeeSite 代码库, 请⭐Star关注
  • JeeSite Vue 代码库, 请⭐关注
  • Spring Cloud 微服务架构
  • JeeSite 手机端/移动端
  • Flowable 中国式工作流
  • OAauth2 统一认证服务器
  • 政务内外网环境中间件
  • 访问 ThinkGem 官方博客
  • 点击进入,下拉查看动态
  • 快速了解

  • 开发手册

  • Vue 开发手册

    • Vue 分离版本介绍
    • 快速开始、安装部署
    • 配置参数、主题配置
    • 前端权限、按钮权限
    • BasicForm 表单组件
    • BasicTable 表格组件
    • 源码解析、表单列表
    • 常用组件库、Hooks
    • 图标 Icon Svg 组件
    • 国际化、多语言
      • 国际化
      • 默认语言
      • 语言配置
        • 语言文件
        • 语言使用
      • 切换语言
      • 新增语言
        • 语言文件
        • 新增语言
    • Less CSS 样式库
    • 引入外部依赖
    • 分离版 ★ 常见问题 ★
  • 扩展功能专题

  • 云服务技术架构

  • 技术服务与支持

Vue 国际化(i18n)、多语言、本地化

# 国际化

如果你使用的 VSCode 开发工具,则推荐安装 I18n-ally (opens new window) 这个插件

安装了该插件后,你的代码内可以实时看到对应的语言内容

# 默认语言

在 src/settings/localeSetting.ts (opens new window) 内可以配置默认语言

export const LOCALE: { [key: string]: LocaleType } = {
  ZH_CN: 'zh_CN',
  EN_US: 'en',
};

export const localeSetting: LocaleSetting = {
  // 是否显示语言选择器
  showPicker: true,
  // 当前语言
  locale: LOCALE.ZH_CN,
  // 默认语言
  fallback: LOCALE.ZH_CN,
  // 允许的语言
  availableLocales: [LOCALE.ZH_CN, LOCALE.EN_US],
};

// 配置语言列表
export const localeList: DropMenu[] = [
  {
    text: '简体中文',
    event: 'zh_CN',
  },
  {
    text: 'English',
    event: 'en',
  },
];
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27

# 语言配置

# 语言文件

在 src/locales/lang/ (opens new window) 可以配置具体的语言

# 语言使用

引入项目自带的 useI18n 注意不要引入 vue-i18n 的 useI18n

import { useI18n } from '/@/hooks/web/useI18n';

const { t } = useI18n();

const title = t('components.modal.title');
1
2
3
4
5

# 切换语言

切换语言需要使用 src/locales/useLocale.ts (opens new window)

import { useLocale } from '/@/locales/useLocale';

const { changeLocale } = useLocale();

changeLocale('en');
1
2
3
4
5

# 新增语言

# 语言文件

在 src/locales/lang/ (opens new window) 增加对应语言的文件即可

# 新增语言

目前项目自带的语言只有 zh_CN 和 en 两种

如果需要新增,按以下操作即可

  1. 在 src/locales/lang/ (opens new window) 下新增相应的语言目录及语言文件并引入 引入 ant-design-vue 和 moment 对应的语言包
  2. 在 types/config.d.ts (opens new window) 内加上预览类型定义
  3. 在 src/settings/localeSetting.ts (opens new window) 修改语言配置
进入 JeeSite 源码仓库页面,点击右上角 ⭐ Star 加星关注。

← 图标 Icon Svg 组件 Less CSS 样式库→

联系我们:s.jeesite.com  |  微信号:jeesitex  |  邮箱:jeesite@163.com
© 2013-2023 济南卓源软件有限公司 版权所有 | Theme Vdoing

关注 JeeSite 公众号,了解最新动态

  • 跟随系统
  • 浅色模式
  • 深色模式
  • 阅读模式