NPC玩家
开发
发布于: 2024-1-9最后更新: 2024-12-31字数 446阅读时长≈ 2 分钟
type
status
date
slug
summary
tags
category
icon
password
今天我学习了VoerkaI18n国际化插件，它是一个适用于Javascript/Vue/React/Solid/ReactNative的国际化全流程解决方案。VoerkaI18n可以帮助我们轻松地实现应用程序的多语言支持，使得应用程序可以适应不同的语言环境。 比较吸引我的是集成自动翻译,t("中华人民共和国万岁")这种中文优先写法,而不是t("hello")这种 官方文档
示例demo
  1. VoerkaI18n安装：

shell

npm install --g @voerkai18n/cli
Shell
  1. 项目根目录安装vue2的插件

shell

npm install @voerkai18n/vue2
Shell
  1. 根目录新增目录src,执行命令

shell

voerkai18n init
Shell
  1. 移动src下生成的languages文件夹到根目录,删除src
  1. 在vue模版里新增

plain

<text>{{t('你好')}}</text>
Plain text
  1. 提取要翻译的文本

shell

voerkai18n extract
Shell
  1. 使用自动翻译或手动翻译(这里我使用了手动翻译演示用) 修改languages/translates/default.json (en后面修改成hello)

plain

{
    "你好": {
        "en": "hello",
        "$files": [
            "pages\\\\index\\\\index.vue"
        ]
    }
}
Plain text
  1. 编译语言包

shell

voerkai18n compile
Shell
最后在 main.js 文件中引入了VoerkaI18n，并进行了相应的配置：

javascript

import { t, i18nScope } from "./languages"
import { i18nPlugin, i18nMixin } from "@voerkai18n/vue2"
Vue.prototype.$t = t
Vue.use(i18nPlugin, { i18nScope })
Vue.mixin(i18nMixin(i18nScope))
JavaScript
  • 切换语言 this.changeLanguage('en') // 或者在模板里changeLanguage('en')
通过以上配置，我成功地集成了VoerkaI18n到我的Vue.js应用程序中，为应用程序添加了国际化的支持。我很高兴能够学习并应用这样一个强大的工具，它将为我的应用程序带来更好的用户体验。
主要是做一个记录,避免下次引入时忘记.这样的流程或许和文档有些许差异.但是最终成功实现了引入并一键切换语言的功能.
Loading...
处理服务器安全组ftp端口放开,宝塔面板ftp访问不到

处理服务器安全组ftp端口放开,宝塔面板ftp访问不到

开发
vscode宏&键绑定

vscode宏&键绑定

工具