java国际化开源框架_开启一个国际化项目

近期在重构我的开源项目 iMap，想着要是能做成一个国际化的项目就好了，于是我在我的后端服务以及前端都引入了 i18n

后端配置

我用的是阿里系的 Egg.js Node 框架来提供后台服务，由于框架的开源插件中已经含有 egg-i18n，本着不重复造轮子的心态，于是直接上手。

首先打开 config/config.default.js 来设定 i18n 的配置项：

exports.i18n = {

// 默认中文

defaultLocale: 'zh-CN',

// // URL 参数，默认 'local' 改为 'lang'

queryField: 'lang',

// cookie 名称

cookieField: 'lang',

// cookie 时长

cookieMaxAge: '1y',

};

其中，他们的彼此之间的权重是 query > cookie > headers

配置好 config 文件之后，需要在 config 文件夹中新增一个 local 文件夹，里面放上项目的语言包，如果只有中英文，那么可以是这样的

.

├── config.default.js

├── config.local.js

├── config.prod.js

├── config.unittest.js

├── locale

│   ├── en-US.js

│   └── zh-CN.js

└── plugin.js

当然也可以使用 json 文件，详情见 egg-i18n 文档

我为了偷懒，直接使用了英文格式作为 key，像这样

// en-US

module.exports = {

// error_handler

'Not Found': 'Not Found',

'Authentication Error': 'Authentication Error',

'Server Error': 'Server Error',

...

};

// zh-CN

module.exports = {

// error_handler

'Not Found': '错误 URL',

'Authentication Error': '权限错误',

'Server Error': '服务器错误',

...

};

在项目中，例如我们需要返回 Not Found 只需要使用 ctx.__('Not Found') 就可以了，框架会自动根据当前请求语言来返回对应的预设语言包

前端配置

后端都集成了 i18n ，作为老本行的前端当然也要配置，先看看效果

本项目使用了 vue ，所以拿 vue 来进行举例

// main.js

import Vue from 'vue'

import VueI18n from 'vue-i18n'

const i18n = new VueI18n({

// 默认中文

locale: 'zh-CN',

messages: {

// 语言包路径

'zh-CN': require('@/common/lang/zh'),

'en-US': require('@/common/lang/en')

}

})

new Vue({

components: { App },

// 这里别漏了

i18n,

template: ''

}).$mount('#app')

再在 common 文件夹中新建 lang 文件夹以及对应的语言包

# /src/common

.

└── lang

├── en.js

└── zh.js

语言包内容示例

// en-US

export const m = {

login: {

input_email: 'Please input email address',

input_password: 'Please input password (4 - 25)',

submit: 'Signin',

github: 'Signin with ',

reset: 'Lost your password ?',

register: 'Signup now'

},

// zh-CN

export const m = {

login: {

input_email: '请输入邮箱',

input_password: '请输入密码(4 - 25位)',

submit: '登录',

github: 'GitHub ',

reset: '忘记密码 ？',

register: '立即注册'

},

}

这样我们就引入语言包成功，接下来是切换语言示例，在组件 methods 中使用 switchLang 方法

switchLang() {

if (this.localLang === 'zh-CN') {

this.localLang = 'en-US'

} else {

this.localLang = 'zh-CN'

}

// 切换语言

this.$i18n.locale = this.localLang

// 使用 vuex 存入全局变量

this.setLang(this.localLang)

},

在 template 中，使用 $t('m.你的key') 就可以实现国际化了

但是现在还有一个问题，我们如何在 script 标签中使用 i18n 呢？

利用 this.$i18n.messages[this.$i18n.locale].m.你的key 就可以做到

打通前后端

在我们前后端都分别配置完成后，我们需要前端是中文的时候，对应的后端返回的数据也是中文格式，在这里，我们利用 headers 中的 'Accept-Language' 来进行前后端的语言配对

axios 示例：

axios.post(obj.url, obj.data, {

headers: {

'Accept-Language': window.$lang

}

})

这个 window.$lang 又是什么呢...

为了保证 ajax 配置文件的纯净简洁(其实是我懒)。为了不需要引入 i18n ，我在 vuex 中，将 this.$i18n.local 赋值给了 window 全局变量 $lang

// mutations

const mutations = {

// 设置 lang

[types.SET_LANG] (state, data) {

state.local = data

window.$lang = data

}

}

这样我们就可以很轻易的获取到当前语言，从而传给后端返回对应语言的数据

当然，为了数据的持久化存储，建议前端将当前语言配置存储在 localstorage 或者是 cookie 里面，否则刷新页面将会遭到重置