i18n Ally国际化-一一网

前言

上上一周要求将项目国际化，翻译成繁体和英语，总共三种语言。boss希望我先去探探路，然后我也整出来了，最近刚把需求做好，抽出点时间总结一下。

项目呢是vue框架，所以使用的也是vue-i18n的国际化插件，不过这不是重点，重点是其官方推荐的工具vscode扩展插件i18n Ally，很强大。

正文

第一步是配置vue-i18n

这是基础，需要通过npm进行安装，然后进行配置使用，vue2和vue3的配置不同，建议看文档

vue-i18n插件的官方文档kazupon.github.io/vue-i18n/in…，最后翻墙打开

安装依赖：npm install vue-i18n -S
复制代码

建议目录，后期使用i18n Ally很有帮助

配置i18n.js

import Vue from 'vue'
import VueI18n from 'vue-i18n'

// 批量引入
const ctx = require.context('./locales', true, /\.json$/)
const map = {}
// console.log(ctx.keys(), map)
// 遍历获取的文件
for (const key of ctx.keys()) {
  map[key] = ctx(key)
}
const en = {}
const cn = {}
const hk = {}
for (const key in map) {
  if (key.indexOf('/en/') !== -1) {
    for (const skey in map[key]) {
      en[skey] = map[key][skey]
    }
  } else if (key.indexOf('/zh-CN/') !== -1) {
    for (const skey in map[key]) {
      cn[skey] = map[key][skey]
    }
  } else {
    for (const skey in map[key]) {
      hk[skey] = map[key][skey]
    }
  }
}
Vue.use(VueI18n)
const messages = {
  'en-us': {
    ...en
  },
  'zh-cn': {
    ...cn
  },
  'zh-hk': {
    ...hk
  }
}
const i18n = new VueI18n({
  locale: localStorage.getItem('lang') || 'zh-cn',
  messages
})

export default i18n
复制代码

这部分有个批量引入的知识，因为后期会有大量的json文件引入，所以通过required.context可以快速解决这个问题，这个知识点我放后面讲。其他部分我就不多说了，建议看文档更清晰，到此基本配置完毕，可以开始使用了。

配置main.js

import i18n from './i18n'
复制代码

第二步是安装i18n Ally

接下来就是vscode的扩展插件，i18n Ally,他的强大是vue-i18n官方推荐的大家看地址就知道了，我们这里主要使用他强大的机器翻译github.com/lokalise/i1…

下载完插件，左侧工具栏就会出现上图的图标，点击就会看到上图的操作面板。如果没有出现，那么一定是你配置的文件夹有问题，因为图标的出现是根据文件夹感应的，这也是我说很有帮助的原因。官方也有推荐相关的目录配置

再来进行对扩展插件进行一些setting的配置，官方也有介绍
标红的地方是翻译器，可以设置多个

接下来是具体操作

我需要进入需要翻译的文件，如index.vue文件，然后点击翻译面板，右键点击第一个，会讲我们全部的中文，切换成$t的变量，变量存放着我们的中文，你需要将其存放到你的json文件里
这里容易有个误区，例如项目需要三种语言，就需要配置三种语言的json文件，而不是配置一种，让插件来给你自动切换。我们可以通过插件机器翻译帮我们将三种json文件配置出来。
复制代码