Electron vue i18n 实现多语言程序

目标


  • 在Main Process中实现多语言

  • 在Renderer Process中,与Vue结合实现多语言

  • 自动检测语言环境,亦可配置改变

  • 动态加载多语言文件

实现


i18next (http://i18next.com/)

在main Process中:

import isDev from ‘electron-is-dev’
import path from ‘path’
import i18next from ‘i18next’
import NodeFsBackend from ‘i18next-node-fs-backend’
import LanguageDetector from ‘i18next-electron-language-detector’

i18next
.use(LanguageDetector)
.use(NodeFsBackend)
.init({
debug: isDev,
whitelist: [ ‘en’, ‘zh’ ],
lowerCaseLng: true,
load: ‘all’,
fallbackLng: [ ‘zh’ ],
ns: [
‘common’
],
fallbackNS: ‘common’,
backend: {
loadPath: path.resolve(__dirname, ‘../resources/locales//.json’),
jsonIndent: 2
}
})

export default i18next

程序启动时进行初始化,但加载是异步的,所以程序在启动初始化进程调用需要通过事件:

i18n.on(‘loaded’, () => {
app.setName(i18n.t(‘appName’))
console.log(i18n.t(‘appName’))
})

在Renderer Process中使用,不需要再初始化,是共用同一个实例的:

// i18n inject
window.i18next = remote.require(‘i18next’)

打通与Vue框架的集成:

import VueParams from ‘vue-params’
import VueI18Next from ‘vue-i18next’

Vue.use(VueParams)
Vue.use(VueI18Next)

// change language at time
window.i18next.on(‘languageChanged’, () => {
console.log(‘change language’, arguments)
Vue.params.i18nextLanguage = window.i18next.language
})


vue-paramsvue-i18next两个依赖的代码很简单巧妙。前者保证了当语言切换时,所有$t()及时更新;后者为Vue框架注入$t()和t()两个调用方法。

最后


以上基本实现了需求,i18next功能很强大,并且还提供翻译服务,可以跟各种环境集成。

有关语言切换,如果处理得当,完全可以不需要重启程序。