前言

VoerkaI18n是一款非常優(yōu)秀的全新的開(kāi)源國(guó)際化多語(yǔ)言解決方案，主要特性包括：

• 全面工程化解決方案，提供初始化、提取文本、自動(dòng)翻譯、編譯等工具鏈支持。
• 符合直覺(jué)，不需要手動(dòng)定義文本Key映射。
• 強(qiáng)大的插值變量格式化器機(jī)制，可以擴(kuò)展出強(qiáng)大的多語(yǔ)言特性。
• 支持babel插件自動(dòng)導(dǎo)入t翻譯函數(shù)。
• 支持nodejs、瀏覽器(vue/react/solid)等、React Native等任意JS場(chǎng)景
• 采用工具鏈與運(yùn)行時(shí)分開(kāi)設(shè)計(jì)，發(fā)布時(shí)只需要集成很小的運(yùn)行時(shí)。
• 高度可擴(kuò)展的復(fù)數(shù)、貨幣、數(shù)字等常用的多語(yǔ)言處理機(jī)制。
• 翻譯過(guò)程內(nèi)，提取文本可以自動(dòng)進(jìn)行同步，并保留已翻譯的內(nèi)容。
• 可以動(dòng)態(tài)在線添加支持的語(yǔ)言
• 支持發(fā)布后的在線打語(yǔ)言包補(bǔ)丁，修復(fù)翻譯錯(cuò)誤
• 支持調(diào)用在線自動(dòng)翻譯對(duì)提取文本進(jìn)行翻譯。
• 核心運(yùn)行時(shí)@voerkai18n/runtime超過(guò)90%的測(cè)試覆蓋率
• 支持·TypeScript·開(kāi)發(fā)

本節(jié)主要介紹如何在Vue 3應(yīng)用中使用VoerkaI18n。

創(chuàng)建Vue 3應(yīng)用一般采用Vite或Vue Cli來(lái)創(chuàng)建工程。在Vue3應(yīng)用中引入voerkai18n來(lái)添加國(guó)際化應(yīng)用需要由兩個(gè)插件來(lái)簡(jiǎn)化應(yīng)用。

• @voerkai18n/vue

  Vue插件，在初始化Vue應(yīng)用時(shí)引入，提供訪問(wèn)當(dāng)前語(yǔ)言、切換語(yǔ)言、自動(dòng)更新等功能。

• @voerkai18n/vite

  Vite插件，在vite.config.js中配置，用來(lái)實(shí)現(xiàn)自動(dòng)文本映射和t函數(shù)的自動(dòng)導(dǎo)入等功能。

@voerkai18n/vue和@voerkai18n/vite兩件插件相互配合，安裝配置好這兩個(gè)插件后，就可以在Vue文件使用多語(yǔ)言t函數(shù)。

第一步：基本流程

Vue應(yīng)用啟用VoerkaI18n國(guó)際化功能的完整工程化流程如下：

• 調(diào)用voerkai18n init初始化多語(yǔ)言工程
• 調(diào)用voerkai18n extract提取要翻譯的文本
• 調(diào)用voerkai18n translate進(jìn)行自動(dòng)翻譯或人工翻譯
• 調(diào)用voerkai18n compile編譯語(yǔ)言包
• 在Vue應(yīng)用中引入@voerkai18n/vue和@voerkai18n/vite插件
• 在源碼中使用t函數(shù)進(jìn)行翻譯

完整的工程化流程請(qǐng)參見(jiàn)工程化，以下簡(jiǎn)要介紹如何在Vue應(yīng)用中使用VoerkaI18n。

第二步：?jiǎn)⒂聾voerkai18n/vite插件

@voerkai18n/vite插件作用是：

• 可以根據(jù)idMap.ts映射文件將源碼中的t("xxxxx")轉(zhuǎn)換為t("<數(shù)字>")的形式，從而實(shí)現(xiàn)消除翻譯內(nèi)容的冗余內(nèi)容。
• 實(shí)現(xiàn)自動(dòng)導(dǎo)入t函數(shù)的功能，省卻手動(dòng)導(dǎo)入的麻煩。

@voerkai18n/vite插件的安裝非常簡(jiǎn)單，只需要在vite.config.(ts|js)中添加如下內(nèi)容：

import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
import Inspect from 'vite-plugin-inspect'
import Voerkai18nPlugin from "@voerkai18n/vite"
 
export default defineConfig({
  plugins: [    
    Inspect(),                // 可選    
    Voerkai18nPlugin(),       // 新增加
    vue()
  ],
})

• @voerkai18n/vite插件僅在開(kāi)發(fā)和構(gòu)建階段作用。事實(shí)上，如果不在乎文本內(nèi)容的冗余，不安裝此插件也是可以工作正常的。
• vite-plugin-inspect僅用于調(diào)試，可以在http://localhost:3000/__inspect/查看當(dāng)前工程中的@voerkai18n/vite是否正確地進(jìn)行自動(dòng)導(dǎo)入和idMap.ts映射，供開(kāi)發(fā)階段進(jìn)行調(diào)試使用。
• @voerkai18n/vite插件的完整使用說(shuō)明。

第三步：配置@voerkai18n/vue插件

@voerkai18n/vue插件用來(lái)自動(dòng)注入t函數(shù)、切換語(yǔ)言等功能。

安裝方法如下：

import { createApp } from 'vue'
import './style.css'
import App from './App.vue'
// 導(dǎo)入插件
import i18nPlugin from '@voerkai18n/vue'
// 導(dǎo)入當(dāng)前作用域
import { i18nScope } from './languages'

// 等待i18nScope初始化完成
i18nScope.ready(()=>{
  const app = createApp(App)
  // 應(yīng)用插件
  app.use<VoerkaI18nPluginOptions>(i18nPlugin as any,{
      i18nScope
  })
  app.mount('#app')
})

@voerkai18n/vue插件本質(zhì)上是為每一個(gè)Vue組件自動(dòng)混入t函數(shù)。

第四步：使用t翻譯函數(shù)

Vue應(yīng)用使用多語(yǔ)言本質(zhì)是調(diào)用import { t } from 'langauges導(dǎo)入的t函數(shù)來(lái)進(jìn)行翻譯。

<script setup>
// 手動(dòng)導(dǎo)入t函數(shù)
// 如果啟用了@voerkai18n/vite插件，則可以省略此行實(shí)現(xiàn)自動(dòng)導(dǎo)入
import { t } from "./languages"
console.log(t("Welcome to VoerkaI18n"))

</script>


// 直接使用t函數(shù)，不需要導(dǎo)入
<script>
export default {
    data(){
        return {
            username:"",
            password:"",
            title:t("認(rèn)證")
        }
    },
    methods:{
        login(){
            alert(t("登錄"))
        }
    }
}
</script>
// 直接使用
<template>
	<div>
        <h1>{{ t("請(qǐng)輸入用戶名稱") }}</h1>
        <div>
            <span>{{t("用戶名:")}}</span><input type="text" :placeholder="t('郵件/手機(jī)號(hào)碼/帳號(hào)')"/>
            <span>{{t("密碼:")}}</span><input type="password" :placeholder="t('至少6位的密碼')"/>            
    	</div>            
    </div>
        <button @click="login">{{t("登錄")}}</button>
    </div>
</template>

重點(diǎn)：

• 在<script setup>中手動(dòng)導(dǎo)入import { t } from "./languages"
• 在<script>和<template>中可以直接使用t函數(shù)進(jìn)行翻譯。
• @voerkai18n/vue插件本質(zhì)上是為每一個(gè)Vue組件自動(dòng)混入t函數(shù)，并在在語(yǔ)言切換時(shí)會(huì)自動(dòng)重新渲染

第五步：切換語(yǔ)言

引入@voerkai18n/vue插件來(lái)實(shí)現(xiàn)切換語(yǔ)言和自動(dòng)重新渲染的功能。文章來(lái)源地址http://www.zghlxwxcb.cn/news/detail-777965.html

<script setup lang="ts">
import { injectVoerkaI18n } from "@voerkai18n/vue"

// 提供一個(gè)i18n對(duì)象
const i18n = injectVoerkaI18n()
</script>

<script>
export default {
   //......
}
</script>  
<template>
  <img alt="Vue logo" src="./assets/logo.png" />
  <h1>{{ t("中華人民共和國(guó)")}} </h1>
  <h2>{{ t("迎接中華民族的偉大復(fù)興")}} </h2>
  <h5>默認(rèn)語(yǔ)言：{{ i18n.defaultLanguage }}</h5>
  <h5>當(dāng)前語(yǔ)言：{{ i18n.activeLanguage }}</h5>
  <!-- 遍歷支持的語(yǔ)言  -->
  <button v-for="lng of i18n.languages" 
    @click="i18n.activeLanguage = lng.name"  
    >{{ lng.title }}</button>
</template>

小結(jié)

• @voerkai18n/vue插件為Vue單文件組件提供自動(dòng)注入t函數(shù)，可以在<script>和<template>中直接使用，在<script setup>中需要手動(dòng)從language中導(dǎo)入t函數(shù)。
• Vue應(yīng)用的中普通js/ts文件需要手動(dòng)從language中導(dǎo)入t函數(shù)。
• 使用injectVoerkaI18n()來(lái)實(shí)現(xiàn)遍歷支持的語(yǔ)言和切換語(yǔ)言的功能。
• 當(dāng)切換語(yǔ)言時(shí)會(huì)自動(dòng)重新渲染組件。
• @voerkai18n/vue插件只能用在Vue 3。
• 完整的示例請(qǐng)見(jiàn)這里

到了這里，關(guān)于Vue應(yīng)用多語(yǔ)言支持工程化最佳實(shí)踐的文章就介紹完了。如果您還想了解更多內(nèi)容，請(qǐng)?jiān)谟疑辖撬阉鱐OY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持TOY模板網(wǎng)！