"use strict";(self.webpackChunkfes_js=self.webpackChunkfes_js||[]).push([[496],{565:(n,s,a)=>{a.r(s),a.d(s,{data:()=>e});const e={key:"v-411c0c9e",path:"/reference/plugin/plugins/locale.html",title:"@fesjs/plugin-locale",lang:"zh-CN",frontmatter:{},excerpt:"",headers:[{level:2,title:"介绍",slug:"介绍",children:[]},{level:2,title:"启用方式",slug:"启用方式",children:[]},{level:2,title:"配置",slug:"配置",children:[{level:3,title:"约定式配置",slug:"约定式配置",children:[]},{level:3,title:"编译时配置",slug:"编译时配置",children:[]},{level:3,title:"运行时配置",slug:"运行时配置",children:[]}]},{level:2,title:"API",slug:"api",children:[{level:3,title:"locale",slug:"locale-1",children:[]},{level:3,title:"useI18n",slug:"usei18n",children:[]}]}],filePathRelative:"reference/plugin/plugins/locale.md",git:{updatedTime:1653450562e3,contributors:[{name:"wanchun",email:"445436867@qq.com",commits:1}]}}},6347:(n,s,a)=>{a.r(s),a.d(s,{default:()=>O});var e=a(6252);const p=(0,e._)("h1",{id:"fesjs-plugin-locale",tabindex:"-1"},[(0,e._)("a",{class:"header-anchor",href:"#fesjs-plugin-locale","aria-hidden":"true"},"#"),(0,e.Uk)(" @fesjs/plugin-locale")],-1),t=(0,e._)("h2",{id:"介绍",tabindex:"-1"},[(0,e._)("a",{class:"header-anchor",href:"#介绍","aria-hidden":"true"},"#"),(0,e.Uk)(" 介绍")],-1),l=(0,e.Uk)("国际化插件，基于 "),o={href:"https://github.com/intlify/vue-i18n-next",target:"_blank",rel:"noopener noreferrer"},c=(0,e.Uk)("Vue I18n"),r=(0,e.Uk)("，用于解决 i18n 问题。"),i=(0,e.uE)('

启用方式

在 package.json 中引入依赖：

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

配置

约定式配置

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

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

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

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

// src/locales/zh-CN.js\nexport default {\n    menu: {\n        interface: '接口'\n    },\n    overview: '概述',\n    i18n: {\n        internationalization: '国际化，基于',\n        achieve: '实现。',\n        ui: 'UI组件'\n    }\n};\n
1
2
3
4
5
6
7
8
9
10
11
12
// src/locales/en-US.js\nexport default {\n    menu: {\n        interface: 'interface'\n    },\n    overview: 'Overview',\n    i18n: {\n        internationalization: 'internationalization，base on',\n        achieve: 'to achieve.',\n        ui: 'UI components'\n    }\n};\n
1
2
3
4
5
6
7
8
9
10
11
12
',11),u=(0,e.Uk)("想了解更多语言信息配置、匹配规则，请参考 "),k={href:"https://vue-i18n.intlify.dev/guide/essentials/syntax.html",target:"_blank",rel:"noopener noreferrer"},d=(0,e.Uk)("Vue I18n"),b=(0,e.Uk)(" 文档。"),g=(0,e.uE)('

编译时配置

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

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

默认配置为：

export default {\n    locale: {\n        locale: 'zh-CN', // default locale\n        fallbackLocale: 'zh-CN', // set fallback locale\n        baseNavigator: true, // 开启浏览器语言检测\n        legacy: true, // 用户是否需要 Legacy API 模式\n    }\n} \n
1
2
3
4
5
6
7
8

所有配置项如下：

locale

fallbackLocale

baseNavigator

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

legacy

运行时配置

暂无。

API

locale

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

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

locale.messages

locale.setLocale

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

locale.addLocale

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

locale.getAllLocales

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

useI18n

',33),m=(0,e.Uk)("Composition API, 只能在 "),h=(0,e._)("code",null,"setup",-1),v=(0,e.Uk)(" 函数中使用，更多细节参考 "),f={href:"https://vue-i18n.intlify.dev/api/composition.html#usei18n",target:"_blank",rel:"noopener noreferrer"},y=(0,e.Uk)("Vue I18n"),j=(0,e.Uk)("。 \b举个 🌰："),x=(0,e.uE)('
<template>\n  <form>\n    <label>{{ t('language') }}</label>\n  </form>\n  <p>message: {{ t('hello') }}</p>\n</template>\n\n<script>\nimport { useI18n } from '@fesjs/fes'\n\nexport default {\n setup() {\n   const { t } = useI18n()\n   // Something to do ...\n\n   return { ..., t }\n }\n}\n</script>\n
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
',1),w=(0,e._)("code",null,"useI18n()",-1),U=(0,e.Uk)("返回结果是 "),_={href:"https://vue-i18n.intlify.dev/api/composition.html#composer",target:"_blank",rel:"noopener noreferrer"},q=(0,e.Uk)("Composer"),C=(0,e.Uk)("，提供类似 "),I=(0,e._)("code",null,"t",-1),N=(0,e.Uk)("、"),z=(0,e._)("code",null,"n",-1),L=(0,e.Uk)("、"),S=(0,e._)("code",null,"d",-1),A=(0,e.Uk)(" 等转换函数，在模板中使用。"),P={},O=(0,a(3744).Z)(P,[["render",function(n,s){const a=(0,e.up)("OutboundLink");return(0,e.wg)(),(0,e.iD)(e.HY,null,[p,t,(0,e._)("p",null,[l,(0,e._)("a",o,[c,(0,e.Wm)(a)]),r]),i,(0,e._)("p",null,[u,(0,e._)("a",k,[d,(0,e.Wm)(a)]),b]),g,(0,e._)("p",null,[m,h,v,(0,e._)("a",f,[y,(0,e.Wm)(a)]),j]),x,(0,e._)("p",null,[w,U,(0,e._)("a",_,[q,(0,e.Wm)(a)]),C,I,N,z,L,S,A])],64)}]])},3744:(n,s)=>{s.Z=(n,s)=>{const a=n.__vccOpts||n;for(const[n,e]of s)a[n]=e;return a}}}]);