1. 前言
最近的一个项目要给到国外的运营人员使用，所以需要实现国际化。这里就简单介绍一下
v-cli实现国际化的原理和需要注意的问题
2. 实现原理
主要的实现原理是利用vue-i18n这个vue插件，配合官方文档可以帮助我们很方便的实现国际化。
3. 实现步骤
3.1 安装vue-i18n插件
npm install vue-i18n --save
3.2 使用vue-i18n
//HTML
<div id="app">
<p>{{ $t("message.hello") }}</p>
</div>
//JAVASCRIPT
const messages = {
en: {
message: {
hello: 'hello world'
}
},
ja: {
message: {
hello: 'こんにちは、世界'
}
}
}
const i18n = new VueI18n({
locale: 'ja', // set locale
messages, // set locale messages
})
new Vue({ i18n }).$mount('#app')
//OUTPUT
<div id="#app">
<p>こんにちは、世界</p>
</div>
可以看到，我们在实例化Vue的时候，将i18n当做一个option传了进去。之后我们就可以在vue的组件里使用i18n了，使用方法：
- 在组件的
template中，调用$t()方法
3.2 v-cli项目中使用
-
src目录下新增language目录，language目录下新增index.js,en.js,zh.js。
en.js和zh.js就是我们的语言包。必须保证语言包的内容是一一对应的。然后我们在index.js中完成设置。 -
index.js加入代码
import Vue from 'vue';
import VueI18n from 'vue-i18n';
import locale from 'element-ui/lib/locale';
import enLocale from 'element-ui/lib/locale/lang/en';
import zhLocale from 'element-ui/lib/locale/lang/zh-CN';
import en from './en';
import zh from './zh';
Vue.use(VueI18n);
const DEFAULT_LANG = 'zh';
const LOCALE_KEY = 'localeLanguage';
const locales = {
zh: {
...zh,
...zhLocale,
},
en: {
...en,
...enLocale,
},
}
const i18n = new VueI18n({
locale: DEFAULT_LANG,
messages: locales
})
export const setup = lang => {
if (lang === undefined) {
lang = window.localStorage.getItem(LOCALE_KEY);
if (locales[lang] === undefined) {
lang = DEFAULT_LANG;
}
}
window.localStorage.setItem(LOCALE_KEY, lang);
Object.keys(locales).forEach(lang => {
document.body.classList.remove(`lang-${lang}`);
})
document.body.classList.add(`lang-${lang}`);
document.body.setAttribute('lang', lang);
Vue.config.lang = lang;
i18n.locale = lang;
}
setup();
// window.i18n = i18n;
locale.i18n((key, keypath) => i18n.t(key, keypath));
export default i18n;
- 代码说明
- 因为是要配合element使用，所以必须也导入element的语言包并配置，具体更多实施方案请见element国际化。
- 为了记住用户的习惯我们这里在localStorage中加入语言的缓存。保存用户切换的语言。避免重新进入时语言需要切换。
-
英文文案大多相较过长，为了避免切换时页面适配出现问题我们可以在body上添加类名和自定义属性来适配不同语言。
-
main.js引入index.js
import Vue from 'vue'
import App from './app.vue'
import store from './store'
import router from './router'
import i18n from './language/index';
export const app = new Vue({
i18n,
router,
store,
render: h => h(App)
}).$mount("#app");
- 配置语言包
en.js
export default {
m: {
home: '首页'，
music: '音乐'
}
}
zh.js
export default {
m: {
home: 'home'，
music: 'music'
}
}
至此，国际化的配置完成，我们就可以项目中使用了。
3.3 使用方式
- 作为普通文本使用
{{ $t('m.home') }} - 配合属性使用
:placeholder ="$t('m.home')" - vue实例中使用
this.$t('m.home')
4 使用问题
4.1 非vue实例的js中使用
日常中我们会封装一些code.js和tools.js。这些js并不能使用vue实例上的方法。但是也需要国际化。这个时候我们只能单独导入i18n来使用。
import i18n from '../language/index';
i18n.t('m.home')
4.2 长文案加变量的翻译问题
- 在翻译这样一句话
我被用户 xxx 拉进一个群聊的时候。英文的翻译是I was dragged into a group chat by user xxx。xxx出现的地方不一致这个时候我们就不能简单的直接设置en.js和zh,js进行转换。 - 我们这里可以把这变量用一个字符替换，然后封装函数匹配变量进行替换
我被用户 %s 拉进一个群聊，I was dragged into a group chat by user %s - 封装函数代码
function tplParse(tpl, params) {
let counter = 0;
if (params && params.length > 0) {
let match;
while(match = tpl.match(/%s/)) {
tpl = tpl.slice(0, match.index) + params[counter] + tpl.slice(match.index + 2);
counter ++;
}
}
return tpl;
}
- 第一个参数是需要替换的文案，第二个参数就是替换的变量
4.3 切换语言的时候遍历的数据无法生效。
在切换语言的时候我们会发现，router的index.js中的语言无法切换。这是因为data是一次性生产的，平常的写法只能是在 data 初始化的时候拿到这些被国际化的值，并不能响应变化。查阅文案给出的方案是需要遍历的数据通过computed重新计算一遍在返回。由于出现的地方较多这种方案实现起来太复杂。暂时的解决方案是切换语言的时候刷新页面。
结语
到这里本篇文章就结束了，有问题的地方还请大家在评论区指出。
