Vue2应用

本节主要介绍如何在Vue 2应用中使用VoerkaI18n。

在Vue 2应用中引入voerkai18n来添加国际化应用需要由两个插件来简化应用。

• @voerkai18n/vue2

  Vue插件，在初始化Vue应用时引入，提供访问当前语言、切换语言、自动更新等功能。

• voerkai18n-loader

  WebPack loader,在vue.config.js中配置，用来实现自动文本映射和t函数的自动导入等功能。

第一步：基本流程

Vue应用启用VoerkaI18n国际化功能的完整工程化流程如下：

• 调用voerkai18n init初始化多语言工程
• 调用voerkai18n extract提取要翻译的文本
• 调用voerkai18n translate进行自动翻译或人工翻译
• 调用voerkai18n compile编译语言包
• 在Vue应用中引入@voerkai18n/vue和@voerkai18n/vite插件
• 在源码中使用t函数进行翻译

完整的工程化流程请参见工程化，以下简要介绍如何在Vue应用中使用VoerkaI18n。

第二步：启用voerkai18n-loader

voerkai18n-loader是一个webpack loader,其作用是：

• 可以根据idMap.ts映射文件将源码中的t("xxxxx")转换为t("<数字>")的形式，从而实现消除翻译内容的冗余内容。
• 实现自动导入t函数的功能，省却手动导入的麻烦。

安装方法如下：

> pnpm add -D voerkai18n-loader
> yarn add -D voerkai18n-loader
> npm install -D voerkai18n-loader

接下来在vue.config.js中进行配置启用：

const path = require('path')

module.exports = {
    configureWebpack: {
        module:{
            rules:[
                {
                    test: [/^$/, /\.(js|vue)$/],
                    use:[
                        {
                            loader:"voerkai18n-loader",
                            // 可选的配置参数
                            options: {
                               autoImport:false,            // 是否自动导入t函数
                               debug:true,                 // 输出一些调试信息
                            }
                        }
                    ],                            
                    include: path.join(__dirname, 'src'),    // 只处理src目录下的文件
                    enforce:'pre',
                } 
            ]
        }
      }
}

• voerkai18n-loader插件仅在开发和构建阶段作用。事实上，如果不在乎文本内容的冗余，不安装此插件也是可以工作正常的。
• voerkai18n-loader插件的完整使用说明。

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

@voerkai18n/vue2插件用来自动注入t函数、切换语言等功能。

使用方法如下：

import Vue from 'vue'
import App from './App.vue'
import router from './router'
import store from './store'
import { i18nScope} from "./languages"
import { i18nPlugin } from "@voerkai18n/vue2"

Vue.config.productionTip = false

Vue.use(i18nPlugin,{i18nScope})

new Vue({
  router,
  store,
  render: h => h(App)
}).$mount('#app')

启用@voerkai18n/vue2插件后，可以实现

• 自动注入t函数到Vue实例中，从而可以在Vue应用中直接使用t函数进行翻译。
• 当切换语言时，自动重新渲染Vue应用。

第四步：使用t翻译函数

Vue应用使用使用t翻译函数，有两种方式：

• 在template中使用t函数

启用安装@voerkai18n/vue2插件后，可以在template中直接使用t函数进行翻译,不需要额外配置。

<template>
	<div>
        <h1>{{ t("请输入用户名称") }}</h1>
        <div>
            <span>{{t("用户名:")}}</span><input type="text" :placeholder="t('邮件/手机号码/帐号')"/>
            <span>{{t("密码:")}}</span><input type="password" :placeholder="t('至少6位的密码')"/>            
    	</div>            
    </div>
        <button @click="login">{{t("登录")}}</button>
    </div>
</template>

• 在script中使用t函数

只需要import { t } from 'langauges导入的t函数来进行翻译即可。

第五步：切换语言

@voerkai18n/vue2插件提供了i18nMixin来实现语言切换功能。

i18nMixin提供了：

• languages：属性，返回支持的语言列表，即i18nScope.languages值。
• activeLanguage：属性，返回当前激活默认语言，即i18nScope.activeLanguage值。
• changeLanguage：方法，切换语言实例方法，即i18nScope.changeLanguage方法。

<script>
import { i18nMixin } from "@voerkai18n/vue2"
 
export default {
    mixins: [i18nMixin()],
   //......
}
</script>  
<template>
  <img alt="Vue logo" src="./assets/logo.png" />
  <h1>{{ t("中华人民共和国")}} </h1>
  <h2>{{ t("迎接中华民族的伟大复兴")}} </h2>
  <h5>当前语言：{{ activeLanguage }}</h5>
  <!-- 遍历支持的语言  -->
  <button v-for="lng of languages" 
    @click="changeLangauge(lng.name)"  
    >{{ lng.title }}</button>
</template>

小结

• @voerkai18n/vue2插件为Vue单文件组件自动注入t函数，可以在<template>中直接使用，在<script>中需要手动从language中导入t函数。
• Vue应用的中普通js/ts文件需要手动从language中导入t函数。
• 使用i18nMixin来实现遍历支持的语言和切换语言的功能。
• 当切换语言时会自动重新渲染组件。
• @voerkai18n/vue2插件只能用在Vue 2。
• 完整的示例请见这里