fes.js/assets/locale.html.88762a65.js

import{_ as o,r as p,o as l,c,b as s,d as n,a as e,f as t}from"./app.136d0839.js";const i={},r=s("h1",{id:"fesjs-plugin-locale",tabindex:"-1"},[s("a",{class:"header-anchor",href:"#fesjs-plugin-locale","aria-hidden":"true"},"#"),n(" @fesjs/plugin-locale")],-1),u=s("h2",{id:"介绍",tabindex:"-1"},[s("a",{class:"header-anchor",href:"#介绍","aria-hidden":"true"},"#"),n(" 介绍")],-1),d={href:"https://github.com/intlify/vue-i18n-next",target:"_blank",rel:"noopener noreferrer"},k=t(`<h2 id="启用方式" tabindex="-1"><a class="header-anchor" href="#启用方式" aria-hidden="true">#</a> 启用方式</h2><p>在 <code>package.json</code> 中引入依赖：</p><div class="language-json line-numbers-mode" data-ext="json"><pre class="language-json"><code><span class="token punctuation">{</span>
    <span class="token property">&quot;dependencies&quot;</span><span class="token operator">:</span> <span class="token punctuation">{</span>
        <span class="token property">&quot;@fesjs/fes&quot;</span><span class="token operator">:</span> <span class="token string">&quot;^3.0.0&quot;</span><span class="token punctuation">,</span>
        <span class="token property">&quot;@fesjs/plugin-locale&quot;</span><span class="token operator">:</span> <span class="token string">&quot;^3.0.0&quot;</span>
    <span class="token punctuation">}</span>
<span class="token punctuation">}</span>
</code></pre><div class="line-numbers" aria-hidden="true"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><h2 id="配置" tabindex="-1"><a class="header-anchor" href="#配置" aria-hidden="true">#</a> 配置</h2><h3 id="约定式配置" tabindex="-1"><a class="header-anchor" href="#约定式配置" aria-hidden="true">#</a> 约定式配置</h3><p>Fes.js 约定如下目录，项目就拥有了 <code>zh-CN</code> 与 <code>en-US</code> 国际化语言切换：</p><div class="language-text line-numbers-mode" data-ext="text"><pre class="language-text"><code>src
  ├── locales
  │    ├── zh-CN.js
  │    └── en-US.js
  └── pages
  │    └── index.vue
  └── app.js
</code></pre><div class="line-numbers" aria-hidden="true"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><p>多语言文件的命名规范：<code>&lt;lang&gt;-&lt;COUNTRY&gt;.js</code></p><p>多语言文件的内容规范：键值组成的字面量，如下：</p><div class="language-javascript line-numbers-mode" data-ext="js"><pre class="language-javascript"><code><span class="token comment">// src/locales/zh-CN.js</span>
<span class="token keyword">export</span> <span class="token keyword">default</span> <span class="token punctuation">{</span>
    <span class="token literal-property property">menu</span><span class="token operator">:</span> <span class="token punctuation">{</span>
        <span class="token keyword">interface</span><span class="token operator">:</span> <span class="token string">&#39;接口&#39;</span><span class="token punctuation">,</span>
    <span class="token punctuation">}</span><span class="token punctuation">,</span>
    <span class="token literal-property property">overview</span><span class="token operator">:</span> <span class="token string">&#39;概述&#39;</span><span class="token punctuation">,</span>
    <span class="token literal-property property">i18n</span><span class="token operator">:</span> <span class="token punctuation">{</span>
        <span class="token literal-property property">internationalization</span><span class="token operator">:</span> <span class="token string">&#39;国际化，基于&#39;</span><span class="token punctuation">,</span>
        <span class="token literal-property property">achieve</span><span class="token operator">:</span> <span class="token string">&#39;实现。&#39;</span><span class="token punctuation">,</span>
        <span class="token literal-property property">ui</span><span class="token operator">:</span> <span class="token string">&#39;UI组件&#39;</span><span class="token punctuation">,</span>
    <span class="token punctuation">}</span><span class="token punctuation">,</span>
<span class="token punctuation">}</span><span class="token punctuation">;</span>
</code></pre><div class="line-numbers" aria-hidden="true"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><div class="language-javascript line-numbers-mode" data-ext="js"><pre class="language-javascript"><code><span class="token comment">// src/locales/en-US.js</span>
<span class="token keyword">export</span> <span class="token keyword">default</span> <span class="token punctuation">{</span>
    <span class="token literal-property property">menu</span><span class="token operator">:</span> <span class="token punctuation">{</span>
        <span class="token keyword">interface</span><span class="token operator">:</span> <span class="token string">&#39;interface&#39;</span><span class="token punctuation">,</span>
    <span class="token punctuation">}</span><span class="token punctuation">,</span>
    <span class="token literal-property property">overview</span><span class="token operator">:</span> <span class="token string">&#39;Overview&#39;</span><span class="token punctuation">,</span>
    <span class="token literal-property property">i18n</span><span class="token operator">:</span> <span class="token punctuation">{</span>
        <span class="token literal-property property">internationalization</span><span class="token operator">:</span> <span class="token string">&#39;internationalization，base on&#39;</span><span class="token punctuation">,</span>
        <span class="token literal-property property">achieve</span><span class="token operator">:</span> <span class="token string">&#39;to achieve.&#39;</span><span class="token punctuation">,</span>
        <span class="token literal-property property">ui</span><span class="token operator">:</span> <span class="token string">&#39;UI components&#39;</span><span class="token punctuation">,</span>
    <span class="token punctuation">}</span><span class="token punctuation">,</span>
<span class="token punctuation">}</span><span class="token punctuation">;</span>
</code></pre><div class="line-numbers" aria-hidden="true"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div>`,11),v={href:"https://vue-i18n.intlify.dev/guide/essentials/syntax.html",target:"_blank",rel:"noopener noreferrer"},g=t(`<h3 id="编译时配置" tabindex="-1"><a class="header-anchor" href="#编译时配置" aria-hidden="true">#</a> 编译时配置</h3><p>在执行 <code>fes dev</code> 或者 <code>fes build</code> 时，通过此配置生成运行时的代码，在配置文件<code>.fes.js</code> 中配置：</p><div class="language-javascript line-numbers-mode" data-ext="js"><pre class="language-javascript"><code><span class="token keyword">export</span> <span class="token keyword">default</span> <span class="token punctuation">{</span>
    <span class="token literal-property property">locale</span><span class="token operator">:</span> <span class="token punctuation">{</span><span class="token punctuation">}</span><span class="token punctuation">,</span>
<span class="token punctuation">}</span><span class="token punctuation">;</span>
</code></pre><div class="line-numbers" aria-hidden="true"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><p>默认配置为：</p><div class="language-javascript line-numbers-mode" data-ext="js"><pre class="language-javascript"><code><span class="token keyword">export</span> <span class="token keyword">default</span> <span class="token punctuation">{</span>
    <span class="token literal-property property">locale</span><span class="token operator">:</span> <span class="token punctuation">{</span>
        <span class="token literal-property property">locale</span><span class="token operator">:</span> <span class="token string">&#39;zh-CN&#39;</span><span class="token punctuation">,</span> <span class="token comment">// default locale</span>
        <span class="token literal-property property">fallbackLocale</span><span class="token operator">:</span> <span class="token string">&#39;zh-CN&#39;</span><span class="token punctuation">,</span> <span class="token comment">// set fallback locale</span>
        <span class="token literal-property property">baseNavigator</span><span class="token operator">:</span> <span class="token boolean">true</span><span class="token punctuation">,</span> <span class="token comment">// 开启浏览器语言检测</span>
        <span class="token literal-property property">legacy</span><span class="token operator">:</span> <span class="token boolean">false</span><span class="token punctuation">,</span> <span class="token comment">// 用户是否需要 Legacy API 模式</span>
    <span class="token punctuation">}</span><span class="token punctuation">,</span>
<span class="token punctuation">}</span><span class="token punctuation">;</span>
</code></pre><div class="line-numbers" aria-hidden="true"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><p>所有配置项如下：</p><h4 id="locale" tabindex="-1"><a class="header-anchor" href="#locale" aria-hidden="true">#</a> locale</h4><ul><li><p><strong>类型</strong>：<code>String</code></p></li><li><p><strong>默认值</strong>：<code>zh-CN</code></p></li><li><p><strong>详情</strong>：当前的语言。</p></li></ul><h4 id="fallbacklocale" tabindex="-1"><a class="header-anchor" href="#fallbacklocale" aria-hidden="true">#</a> fallbackLocale</h4><ul><li><p><strong>类型</strong>：<code>String</code></p></li><li><p><strong>默认值</strong>：<code>zh-CN</code></p></li><li><p><strong>详情</strong>：兜底的语言，如果当前语言找不到配置，则使用默认语言，需要保证默认语言配置文件存在。</p></li></ul><h4 id="basenavigator" tabindex="-1"><a class="header-anchor" href="#basenavigator" aria-hidden="true">#</a> baseNavigator</h4><ul><li><p><strong>类型</strong>：<code>Boolean</code></p></li><li><p><strong>默认值</strong>：<code>true</code></p></li><li><p><strong>详情</strong>：开启浏览器语言检测。</p></li></ul><p>默认情况下，当前语言环境的识别按照：<code>localStorage</code> 中 <code>fes_locale</code> 值 &gt; 浏览器检测 &gt; <code>default</code> 设置的默认语言 &gt; <code>zh-CN</code> 中文。</p><h4 id="legacy" tabindex="-1"><a class="header-anchor" href="#legacy" aria-hidden="true">#</a> legacy</h4><ul><li><p><strong>类型</strong>：<code>Boolean</code></p></li><li><p><strong>默认值</strong>：<code>false</code></p></li><li><p><strong>详情</strong>：用户是否需要 Legacy API 模式</p></li></ul><h3 id="运行时配置" tabindex="-1"><a class="header-anchor" href="#运行时配置" aria-hidden="true">#</a> 运行时配置</h3><p>暂无。</p><h2 id="api" tabindex="-1"><a class="header-anchor" href="#api" aria-hidden="true">#</a> API</h2><h3 id="locale-1" tabindex="-1"><a class="header-anchor" href="#locale-1" aria-hidden="true">#</a> locale</h3><p>插件 API 通过 <code>@fesjs/fes</code> 导出：</p><div class="language-javascript line-numbers-mode" data-ext="js"><pre class="language-javascript"><code><span class="token keyword">import</span> <span class="token punctuation">{</span> locale <span class="token punctuation">}</span> <span class="token keyword">from</span> <span class="token string">&#39;@fesjs/fes&#39;</span><span class="token punctuation">;</span>
</code></pre><div class="line-numbers" aria-hidden="true"><div class="line-number"></div></div></div><h4 id="locale-messages" tabindex="-1"><a class="header-anchor" href="#locale-messages" aria-hidden="true">#</a> locale.messages</h4><ul><li><strong>类型</strong>：<code>Object</code></li><li><strong>详情</strong>：当前的配置的语言信息。</li></ul><h4 id="locale-setlocale" tabindex="-1"><a class="header-anchor" href="#locale-setlocale" aria-hidden="true">#</a> locale.setLocale</h4><ul><li><strong>类型</strong>：<code>Function</code></li><li><strong>详情</strong>：设置当前的语言。</li><li><strong>参数</strong>： <ul><li>locale，语言的名称，应该是符合 <code>&lt;lang&gt;-&lt;COUNTRY&gt;</code> 规范的名称。</li></ul></li><li><strong>返回值</strong>：<code>null</code></li></ul><div class="language-javascript line-numbers-mode" data-ext="js"><pre class="language-javascript"><code><span class="token keyword">import</span> <span class="token punctuation">{</span> locale <span class="token punctuation">}</span> <span class="token keyword">from</span> <span class="token string">&#39;@fesjs/fes&#39;</span><span class="token punctuation">;</span>
locale<span class="token punctuation">.</span><span class="token function">setLocale</span><span class="token punctuation">(</span><span class="token punctuation">{</span> <span class="token literal-property property">locale</span><span class="token operator">:</span> <span class="token string">&#39;en-US&#39;</span> <span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
</code></pre><div class="line-numbers" aria-hidden="true"><div class="line-number"></div><div class="line-number"></div></div></div><h4 id="locale-addlocale" tabindex="-1"><a class="header-anchor" href="#locale-addlocale" aria-hidden="true">#</a> locale.addLocale</h4><ul><li><strong>类型</strong>：<code>Function</code></li><li><strong>详情</strong>：手动添加语言配置。</li><li><strong>参数</strong>： <ul><li>locale，语言的名称，符合 <code>&lt;lang&gt;-&lt;COUNTRY&gt;</code> 规范的名称。</li><li>messages, 语言信息。</li></ul></li><li><strong>返回值</strong>：<code>null</code></li></ul><div class="language-javascript line-numbers-mode" data-ext="js"><pre class="language-javascript"><code><span class="token keyword">import</span> <span class="token punctuation">{</span> locale <span class="token punctuation">}</span> <span class="token keyword">from</span> <span class="token string">&#39;@fesjs/fes&#39;</span><span class="token punctuation">;</span>
locale<span class="token punctuation">.</span><span class="token function">addLocale</span><span class="token punctuation">(</span><span class="token punctuation">{</span> <span class="token literal-property property">locale</span><span class="token operator">:</span> <span class="token string">&#39;ja-JP&#39;</span><span class="token punctuation">,</span> <span class="token literal-property property">messages</span><span class="token operator">:</span> <span class="token punctuation">{</span> <span class="token literal-property property">test</span><span class="token operator">:</span> <span class="token string">&#39;テスト&#39;</span> <span class="token punctuation">}</span> <span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
</code></pre><div class="line-numbers" aria-hidden="true"><div class="line-number"></div><div class="line-number"></div></div></div><h4 id="locale-getalllocales" tabindex="-1"><a class="header-anchor" href="#locale-getalllocales" aria-hidden="true">#</a> locale.getAllLocales</h4><ul><li><strong>类型</strong>：<code>Function</code></li><li><strong>详情</strong>：获取当前获得所有国际化文件的列表，默认会在 locales 文件夹下寻找类似 <code>en-US.js</code> 文件。</li><li><strong>参数</strong>：null</li><li><strong>返回值</strong>：<code>Array</code></li></ul><div class="language-javascript line-numbers-mode" data-ext="js"><pre class="language-javascript"><code><span class="token keyword">import</span> <span class="token punctuation">{</span> locale <span class="token punctuation">}</span> <span class="token keyword">from</span> <span class="token string">&#39;@fesjs/fes&#39;</span><span class="token punctuation">;</span>
console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span>locale<span class="token punctuation">.</span><span class="token function">getAllLocales</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
<span class="token comment">// [&quot;en-US&quot;, &quot;id-ID&quot;, &quot;ja-JP&quot;, &quot;pt-BR&quot;, &quot;zh-CN&quot;, &quot;zh-TW&quot;]</span>
</code></pre><div class="line-numbers" aria-hidden="true"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><h3 id="usei18n" tabindex="-1"><a class="header-anchor" href="#usei18n" aria-hidden="true">#</a> useI18n</h3>`,33),m=s("code",null,"setup",-1),h={href:"https://vue-i18n.intlify.dev/api/composition.html#usei18n",target:"_blank",rel:"noopener noreferrer"},b=t(`<div class="language-vue line-numbers-mode" data-ext="vue"><pre class="language-vue"><code><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>template</span><span class="token punctuation">&gt;</span></span>
    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>form</span><span class="token punctuation">&gt;</span></span>
        <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>label</span><span class="token punctuation">&gt;</span></span>{{ t(&#39;language&#39;) }}<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>label</span><span class="token punctuation">&gt;</span></span>
    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>form</span><span class="token punctuation">&gt;</span></span>
    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>p</span><span class="token punctuation">&gt;</span></span>message: {{ t(&#39;hello&#39;) }}<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>p</span><span class="token punctuation">&gt;</span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>template</span><span class="token punctuation">&gt;</span></span>

<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>script</span><span class="token punctuation">&gt;</span></span><span class="token script"><span class="token language-javascript">
<span class="token keyword">import</span> <span class="token punctuation">{</span> useI18n <span class="token punctuation">}</span> <span class="token keyword">from</span> <span class="token string">&#39;@fesjs/fes&#39;</span>

<span class="token keyword">export</span> <span class="token keyword">default</span> <span class="token punctuation">{</span>
 <span class="token function">setup</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
   <span class="token keyword">const</span> <span class="token punctuation">{</span> t <span class="token punctuation">}</span> <span class="token operator">=</span> <span class="token function">useI18n</span><span class="token punctuation">(</span><span class="token punctuation">)</span>
   <span class="token comment">// Something to do ...</span>

   <span class="token keyword">return</span> <span class="token punctuation">{</span> <span class="token operator">...</span><span class="token punctuation">,</span> t <span class="token punctuation">}</span>
 <span class="token punctuation">}</span>
<span class="token punctuation">}</span>
</span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>script</span><span class="token punctuation">&gt;</span></span>
</code></pre><div class="line-numbers" aria-hidden="true"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div>`,1),f=s("code",null,"useI18n()",-1),y={href:"https://vue-i18n.intlify.dev/api/composition.html#composer",target:"_blank",rel:"noopener noreferrer"},j=s("code",null,"t",-1),_=s("code",null,"n",-1),x=s("code",null,"d",-1);function w(q,N){const a=p("ExternalLinkIcon");return l(),c("div",null,[r,u,s("p",null,[n("国际化插件，基于 "),s("a",d,[n("Vue I18n"),e(a)]),n("，用于解决 i18n 问题。")]),k,s("p",null,[n("想了解更多语言信息配置、匹配规则，请参考 "),s("a",v,[n("Vue I18n"),e(a)]),n(" 文档。")]),g,s("p",null,[n("Composition API, 只能在 "),m,n(" 函数中使用，更多细节参考 "),s("a",h,[n("Vue I18n"),e(a)]),n("。 \b 举个 🌰：")]),b,s("p",null,[f,n("返回结果是 "),s("a",y,[n("Composer"),e(a)]),n("，提供类似 "),j,n("、"),_,n("、"),x,n(" 等转换函数，在模板中使用。")])])}const C=o(i,[["render",w],["__file","locale.html.vue"]]);export{C as default};