@fesjs/plugin-locale

介绍

国际化插件,基于 Vue I18n在新窗口打开,用于解决 i18n 问题。

启用方式

package.json 中引入依赖:

{
    "dependencies": {
        "@fesjs/fes": "^2.0.0",
        "@fesjs/plugin-locale": "^2.0.0"
    },
}
1
2
3
4
5
6

配置

约定式配置

Fes.js 约定如下目录,项目就拥有了 zh-CNen-US 国际化语言切换:

src
  ├── locales
  │    ├── zh-CN.js
  │    └── en-US.js
  └── pages
  │    └── index.vue
  └── app.js
1
2
3
4
5
6
7

多语言文件的命名规范:<lang>-<COUNTRY>.js

多语言文件的内容规范:键值组成的字面量,如下:

// src/locales/zh-CN.js
export default {
    menu: {
        interface: '接口'
    },
    overview: '概述',
    i18n: {
        internationalization: '国际化,基于',
        achieve: '实现。',
        ui: 'UI组件'
    }
};
1
2
3
4
5
6
7
8
9
10
11
12
// src/locales/en-US.js
export default {
    menu: {
        interface: 'interface'
    },
    overview: 'Overview',
    i18n: {
        internationalization: 'internationalization,base on',
        achieve: 'to achieve.',
        ui: 'UI components'
    }
};
1
2
3
4
5
6
7
8
9
10
11
12

想了解更多语言信息配置、匹配规则,请参考 Vue I18n在新窗口打开 文档。

编译时配置

在执行 fes dev 或者 fes build 时,通过此配置生成运行时的代码,在配置文件.fes.js 中配置:

export default {
    locale: {
    }
}
1
2
3
4

默认配置为:

export default {
    locale: {
        locale: 'zh-CN', // default locale
        fallbackLocale: 'zh-CN', // set fallback locale
        baseNavigator: true, // 开启浏览器语言检测
        share: true, // 用户是否需要手动改变语言
    }
} 
1
2
3
4
5
6
7
8

所有配置项如下:

locale

  • 类型String

  • 默认值zh-CN

  • 详情:当前的语言。

fallbackLocale

  • 类型String

  • 默认值zh-CN

  • 详情:兜底的语言,如果当前语言找不到配置,则使用默认语言,需要保证默认语言配置文件存在。

baseNavigator

  • 类型Boolean

  • 默认值true

  • 详情:开启浏览器语言检测。

默认情况下,当前语言环境的识别按照:localStoragefes_locale 值 > 浏览器检测 > default 设置的默认语言 > zh-CN 中文。

share

  • 类型Boolean

  • 默认值true

  • 详情:是否共享API,共享语言选择器 { SelectLang } ,其他插件可以获取到共享内容。

比如:

import { plugin } from "@@/core/coreExports";
const localeShared = plugin.getShared("locale");
1
2

运行时配置

暂无。

API

locale

插件 API 通过 @fesjs/fes 导出:

import { locale } from '@fesjs/fes'
1

locale.messages

  • 类型Object

  • 详情:当前的配置的语言信息。

locale.setLocale

  • 类型Function

  • 详情:设置当前的语言。

  • 参数

    • locale,语言的名称,应该是符合 <lang>-<COUNTRY> 规范的名称。
  • 返回值null

import { locale } from '@fesjs/fes';
locale.setLocale({ locale: 'en-US' });
1
2

locale.addLocale

  • 类型Function

  • 详情:手动添加语言配置。

  • 参数

    • locale,语言的名称,符合 <lang>-<COUNTRY> 规范的名称。
    • messages, 语言信息。
  • 返回值null

import { locale } from '@fesjs/fes'
locale.addLocale({ locale: 'ja-JP', messages: { test: 'テスト' } });
1
2

locale.getAllLocales

  • 类型Function

  • 详情:获取当前获得所有国际化文件的列表,默认会在 locales 文件夹下寻找类似 en-US.js 文件。

  • 参数:null

  • 返回值Array

import { locale } from '@fesjs/fes';
console.log(locale.getAllLocales());
// ["en-US", "id-ID", "ja-JP", "pt-BR", "zh-CN", "zh-TW"]
1
2
3

useI18n

Composition API, 只能在 setup 函数中使用,更多细节参考 Vue I18n在新窗口打开。 举个 🌰:

<template>
  <form>
    <label>{{ t('language') }}</label>
  </form>
  <p>message: {{ t('hello') }}</p>
</template>

<script>
import { useI18n } from '@fesjs/fes'

export default {
 setup() {
   const { t } = useI18n()
   // Something to do ...

   return { ..., t }
 }
}
</script>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19

useI18n()返回结果是 Composer在新窗口打开,提供类似 tnd 等转换函数,在模板中使用。