专门做塑胶原料副牌网站,网页无法访问此页面怎么办?网页打不开怎么解决,沈阳火车站,趣头条自媒体平台注册前言
VoerkaI18n是一款非常优秀的全新的开源国际化多语言解决方案#xff0c;主要特性包括#xff1a;
全面工程化解决方案#xff0c;提供初始化、提取文本、自动翻译、编译等工具链支持。符合直觉#xff0c;不需要手动定义文本Key映射。强大的插值变量格式化器机制主要特性包括
全面工程化解决方案提供初始化、提取文本、自动翻译、编译等工具链支持。符合直觉不需要手动定义文本Key映射。强大的插值变量格式化器机制可以扩展出强大的多语言特性。支持babel插件自动导入t翻译函数。支持nodejs、浏览器(vue/react/solid)等、React Native等任意JS场景采用工具链与运行时分开设计发布时只需要集成很小的运行时。高度可扩展的复数、货币、数字等常用的多语言处理机制。翻译过程内提取文本可以自动进行同步并保留已翻译的内容。可以动态在线添加支持的语言支持发布后的在线打语言包补丁修复翻译错误支持调用在线自动翻译对提取文本进行翻译。核心运行时voerkai18n/runtime超过90%的测试覆盖率支持·TypeScript·开发 本节主要介绍如何在Vue 3应用中使用VoerkaI18n。 创建Vue 3应用一般采用Vite或Vue Cli来创建工程。在Vue3应用中引入voerkai18n来添加国际化应用需要由两个插件来简化应用。 voerkai18n/vue Vue插件在初始化Vue应用时引入提供访问当前语言、切换语言、自动更新等功能。 voerkai18n/vite Vite插件在vite.config.js中配置用来实现自动文本映射和t函数的自动导入等功能。
voerkai18n/vue和voerkai18n/vite两件插件相互配合安装配置好这两个插件后就可以在Vue文件使用多语言t函数。
第一步基本流程
Vue应用启用VoerkaI18n国际化功能的完整工程化流程如下
调用voerkai18n init初始化多语言工程调用voerkai18n extract提取要翻译的文本调用voerkai18n translate进行自动翻译或人工翻译调用voerkai18n compile编译语言包在Vue应用中引入voerkai18n/vue和voerkai18n/vite插件在源码中使用t函数进行翻译
完整的工程化流程请参见工程化以下简要介绍如何在Vue应用中使用VoerkaI18n。
第二步启用voerkai18n/vite插件
voerkai18n/vite插件作用是
可以根据idMap.ts映射文件将源码中的t(xxxxx)转换为t(数字)的形式从而实现消除翻译内容的冗余内容。实现自动导入t函数的功能省却手动导入的麻烦。
voerkai18n/vite插件的安装非常简单只需要在vite.config.(ts|js)中添加如下内容 import { defineConfig } from vite
import vue from vitejs/plugin-vue
import Inspect from vite-plugin-inspect
import Voerkai18nPlugin from voerkai18n/viteexport default defineConfig({plugins: [ Inspect(), // 可选 Voerkai18nPlugin(), // 新增加vue()],
})
voerkai18n/vite插件仅在开发和构建阶段作用。事实上如果不在乎文本内容的冗余不安装此插件也是可以工作正常的。vite-plugin-inspect仅用于调试可以在http://localhost:3000/__inspect/查看当前工程中的voerkai18n/vite是否正确地进行自动导入和idMap.ts映射供开发阶段进行调试使用。voerkai18n/vite插件的完整使用说明。
第三步配置voerkai18n/vue插件
voerkai18n/vue插件用来自动注入t函数、切换语言等功能。
安装方法如下
import { createApp } from vue
import ./style.css
import App from ./App.vue
// 导入插件
import i18nPlugin from voerkai18n/vue
// 导入当前作用域
import { i18nScope } from ./languages// 等待i18nScope初始化完成
i18nScope.ready((){const app createApp(App)// 应用插件app.useVoerkaI18nPluginOptions(i18nPlugin as any,{i18nScope})app.mount(#app)
})
voerkai18n/vue插件本质上是为每一个Vue组件自动混入t函数。
第四步使用t翻译函数
Vue应用使用多语言本质是调用import { t } from langauges导入的t函数来进行翻译。 script setup
// 手动导入t函数
// 如果启用了voerkai18n/vite插件则可以省略此行实现自动导入
import { t } from ./languages
console.log(t(Welcome to VoerkaI18n))/script// 直接使用t函数不需要导入
script
export default {data(){return {username:,password:,title:t(认证)}},methods:{login(){alert(t(登录))}}
}
/script
// 直接使用
templatedivh1{{ t(请输入用户名称) }}/h1divspan{{t(用户名:)}}/spaninput typetext :placeholdert(邮件/手机号码/帐号)/span{{t(密码:)}}/spaninput typepassword :placeholdert(至少6位的密码)/ /div /divbutton clicklogin{{t(登录)}}/button/div
/template重点
在script setup中手动导入import { t } from ./languages在script和template中可以直接使用t函数进行翻译。voerkai18n/vue插件本质上是为每一个Vue组件自动混入t函数并在在语言切换时会自动重新渲染
第五步切换语言
引入voerkai18n/vue插件来实现切换语言和自动重新渲染的功能。 script setup langts
import { injectVoerkaI18n } from voerkai18n/vue// 提供一个i18n对象
const i18n injectVoerkaI18n()
/scriptscript
export default {//......
}
/script
templateimg altVue logo src./assets/logo.png /h1{{ t(中华人民共和国)}} /h1h2{{ t(迎接中华民族的伟大复兴)}} /h2h5默认语言{{ i18n.defaultLanguage }}/h5h5当前语言{{ i18n.activeLanguage }}/h5!-- 遍历支持的语言 --button v-forlng of i18n.languages clicki18n.activeLanguage lng.name {{ lng.title }}/button
/template
小结
voerkai18n/vue插件为Vue单文件组件提供自动注入t函数可以在script和template中直接使用在script setup中需要手动从language中导入t函数。Vue应用的中普通js/ts文件需要手动从language中导入t函数。使用injectVoerkaI18n()来实现遍历支持的语言和切换语言的功能。当切换语言时会自动重新渲染组件。voerkai18n/vue插件只能用在Vue 3。完整的示例请见这里
