import{_ as s,o as a,c as l,V as n}from"./chunks/framework.b31a4d00.js";const B=JSON.parse('{"title":"@fesjs/plugin-locale","description":"","frontmatter":{},"headers":[],"relativePath":"reference/plugin/plugins/locale.md"}'),o={name:"reference/plugin/plugins/locale.md"},p=n(`

@fesjs/plugin-locale ​

介绍 ​

国际化插件，基于 Vue I18n，用于解决 i18n 问题。

启用方式 ​

在 package.json 中引入依赖：

json
{
    "dependencies": {
        "@fesjs/fes": "^3.0.0",
        "@fesjs/plugin-locale": "^3.0.0"
    }
}

配置 ​

约定式配置 ​

Fes.js 约定如下目录，项目就拥有了 zh-CN 与 en-US 国际化语言切换：

src
  ├── locales
  │    ├── zh-CN.js
  │    └── en-US.js
  └── pages
  │    └── index.vue
  └── app.js

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

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

js
// src/locales/zh-CN.js
export default {
    menu: {
        interface: '接口',
    },
    overview: '概述',
    i18n: {
        internationalization: '国际化，基于',
        achieve: '实现。',
        ui: 'UI组件',
    },
};
js
// src/locales/en-US.js
export default {
    menu: {
        interface: 'interface',
    },
    overview: 'Overview',
    i18n: {
        internationalization: 'internationalization，base on',
        achieve: 'to achieve.',
        ui: 'UI components',
    },
};

想了解更多语言信息配置、匹配规则，请参考 Vue I18n 文档。

多层配置 ​

如果国际化内容较多，希望模块化配置，则可以这样：

src
  ├── locales
  │    ├── zh-CN.js
  │    └── en-US.js
  |    └── system
  |       ├── zh-CN.js
  │       └── en-US.js
  └── pages
  │    └── index.vue
  └── app.js

插件会把相同语言的配置合并在一起！

编译时配置 ​

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

js
export default {
    locale: {},
};

默认配置为：

js
export default {
    locale: {
        locale: 'zh-CN', // default locale
        fallbackLocale: 'zh-CN', // set fallback locale
        baseNavigator: true, // 开启浏览器语言检测
        legacy: false, // 用户是否需要 Legacy API 模式
    },
};

所有配置项如下：

locale ​

fallbackLocale ​

baseNavigator ​

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

legacy ​

运行时配置 ​

暂无。

API ​

locale ​

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

js
import { locale } from '@fesjs/fes';

locale.messages ​

locale.setLocale ​

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

locale.addLocale ​

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

locale.getAllLocales ​

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

useI18n ​

Composition API, 只能在 setup 函数中使用，更多细节参考 Vue I18n。 \b 举个 🌰：

vue
<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>

useI18n()返回结果是 Composer，提供类似 t、n、d 等转换函数，在模板中使用。

`,55),e=[p];function t(c,r,D,y,F,i){return a(),l("div",null,e)}const u=s(o,[["render",t]]);export{B as __pageData,u as default};