vue实现国际化

前言

最近的一个项目要给到国外的运营人员使用，所以需要实现国际化。这里就简单介绍一下v-cli实现国际化的原理和需要注意的问题

实现原理

主要的实现原理是利用vue-i18n这个vue插件，配合官方文档可以帮助我们很方便的实现国际化。

实现步骤

安装`vue-i18n`插件

1	npm install vue-i18n --save

使用`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()方法

`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'
  }
}

至此，国际化的配置完成，我们就可以项目中使用了。

使用方式

作为普通文本使用
1
{{ $t('m.home') }}
配合属性使用
1
:placeholder ="$t('m.home')"
vue实例中使用
1
this.$t('m.home')`

使用问题

非`vue`实例的`js`中使用

日常中我们会封装一些code.js和tools.js。这些js并不能使用vue实例上的方法。但是也需要国际化。这个时候我们只能单独导入i18n来使用。

1 2	import i18n from '../language/index'; i18n.t('m.home')

长文案加变量的翻译问题

在翻译这样一句话 我被用户 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;
}

第一个参数是需要替换的文案，第二个参数就是替换的变量

切换语言的时候遍历的数据无法生效。
在切换语言的时候我们会发现，router的index.js中的语言无法切换。这是因为data是一次性生产的，平常的写法只能是在 data 初始化的时候拿到这些被国际化的值，并不能响应变化。查阅文案给出的方案是需要遍历的数据通过computed重新计算一遍在返回。由于出现的地方较多这种方案实现起来太复杂。暂时的解决方案是切换语言的时候刷新页面。

结语

到这里本篇文章就结束了，有问题的地方还请大家在评论区指出。

前言

实现原理

实现步骤

安装vue-i18n插件

使用vue-i18n

v-cli项目中使用