• 设为首页
  • 点击收藏
  • 手机版
    手机扫一扫访问
    迪恩网络手机版
  • 关注官方公众号
    微信扫一扫关注
    公众号

UI 本地化

原作者: [db:作者] 来自: [db:来源] 收藏 邀请

标准 UI

请遵循下列简单步骤来为 CLI UI 提交一种其它语言的翻译!

  1. 运行 navigator.languages 或 navigator.language 为新的地区获取语言代码。例如:'fr'。
  2. 搜索 npm 确认名为 vue-cli-locale-<language code> 的包是否已经存在。如果存在,则请通过 PR 为它贡献!如果没找到,则创建一个新的名为 vue-cli-locale-<language code> 的地区的包。例如:vue-cli-locale-fr.
  3. 将地区的 JSON 文件放置在一个 locales 文件夹并将这个文件命名为语言代码。例如:locales/fr.json。
  4. 在 package.json 文件中,设置 unpkg 字段为地区文件的路径。例如:"unpkg": "./locales/fr.json"。
  5. 将包发布到 npm 上。

可以参考这里的英文地区文件。

作为示例,参考一份法语的包

翻译插件

你也可以在插件的根目录的 locales 文件夹放置与 vue-i18n 兼容的地区文件。这样做会在项目打开的时候自动加载,然后你可以使用 $t 在你的组件和 vue-i18n 辅助函数里翻译字符串。同样的 UI API (像 describeTask) 用到的字符串将会进入 vue-i18n,这样你就可以对它们做本地化。

示例 locales 文件夹:

vue-cli-plugin/locales/en.json
vue-cli-plugin/locales/fr.json

API 的用法示例:

api.describeConfig({
  // vue-i18n 路径
  description: 'com.my-name.my-plugin.config.foo'
})

危险

请确定为 id 设置正确的命名空间,因为它需要跨所有插件保持唯一。我们推荐使用反向域名记号 (reverse domain name notation)

在组件中使用的示例:

<VueButton>{{ $t('com.my-name.my-plugin.actions.bar') }}</VueButton>

如果你愿意的话,可以使用 ClientAddonApi 在一个客户端 addon 加载地区文件:

// 加载本地文件 (使用 vue-i18n)
const locales = require.context('./locales', true, /[a-z0-9]+\.json$/i)
locales.keys().forEach(key => {
  const locale = key.match(/([a-z0-9]+)\./i)[1]
  ClientAddonApi.addLocalization(locale, locales(key))
})



鲜花

握手

雷人

路过

鸡蛋
该文章已有0人参与评论

请发表评论

全部评论

专题导读
上一篇:
下一篇:
UI 插件 API发布时间:2022-01-28
热门推荐
热门话题
阅读排行榜

扫描微信二维码

查看手机版网站

随时了解更新最新资讯

139-2527-9053

在线客服(服务时间 9:00~18:00)

在线QQ客服
地址:深圳市南山区西丽大学城创智工业园
电邮:jeky_zhao#qq.com
移动电话:139-2527-9053

Powered by 互联科技 X3.4© 2001-2213 极客世界.|Sitemap