你不知道的国际化插件vue-swift-i18nvue-swift-i18n RichieChoo/vue-swift-

vue-swift-i18n RichieChoo/vue-swift-i18n

前言 💌

如今国际化项目已经成为各个公司必不可少的业务项目，关于国际化项目的解决方案也有很多，目前市场上用的比较多的还是vue-i18n，早在18年第一次接触到有国际化需求的时候，用的也是vue-i18n，编辑器使用的webStorm，所以没想那么多直接用。由于是项目后期加入，最关键的两个问题

不断的复制粘贴，命名，替换（偶尔还会写错$符号等 😪）
后期开发，代码可读性极差

所以当有其他项目要国际化时，果断放弃vue-i18n，寻找新的出路，今天的主角vue-swift-i18n

为什么用这个插件？

1、传统i18n，需要将所有出现的国际化的汉字复制取名配置（你有没有取名荒） 2、需要区分template，script中汉字，然后手动变更为 $t('')或者this.$ t('') 3、智能替换： i. 相同val时，新的key, val替换原来的key, val ii. 不同val时，保存新增key, val和原有的key, val 4、即使key命名可以大致猜到这里对应的中文是什么？但是时间长了，也会忘记。降低了代码可读性（该插件含showLabel功能，但是需要每次点击，不够智能，依旧没有提升代码的可读性，上源码了！！往下看👇）

使用方法

安装：（商店搜索vue-swift-i18n，或者ctrl+p,输入ext install RichieChoo.vue-swift-i18n 使用：

插件功能

检测 vue/js 中的需要国际化的汉字，自动生成 json 文件
根据 json 文件检测 vue/js,检测汉字，自动替换成步骤 1 生成的 json 的 key
检测 vue/js 文件中的已替换的 key，展示对应汉字提示弹窗
xxx.json 文件中，生成扁平化的 locales 的 xxx_flat.json 文件,方便取值复制
在 vue/js 中提供，提供 t,tt,ttt 代码提示

如何工作的

快速更新JSON

🖤 汉字检索原则
- 位于中的汉字，如汉字123
- 位于中的标签属性的汉字，如
- 位于中的{{与}}之间的汉字，如{{test ? "汉字" : "中文" }}
- 位于中的"与"之间的汉字，'与'之间的汉字
- 过滤单行注释

🖤  i18n JSON更新路径

- 默认：**`[root]/src/locales/zh-cn.json`** 为默认 json 路径
- 当设置defaultLocalesPath、langFile，路径：**`[root]/[defaultLocalesPath]/[langFile]`**

```jsx
// richierc.json项目配置文件，优先级更高
{
	// 指定vue-swift-i18n更新国际化JSON和快速展示国际化JSON的文件目录地址
  "defaultLocalesPath": "src/locales",
	// 指定国际化JSON文件名称
  "langFile": "zh.json",
  "notAlertBeforeUpdateI18n": true,
  "parentDirLevel": 2,
	// 为国际化JSON的value生成唯一key的类型，默认为short，长度为12，一般不需要配置
  "puidType": "short"
}
```

智能替换（高级用法它来了它来了）

语法文档：kazupon.github.io/vue-i18n/

Tips 这里我是当作一个插件项目来使用的，直接在插件项目中修改，业务项目中只需引入插件，在插件项目中启动业务项目即可，业务中无需配置任何有关插件的内容；也可以直接在业务项目中引入修改！！！！！

🖤 通过正则对'.vue'和‘.js'的国际化汉字进行分类(修改这里的配置)

修改前效果：{{$t('task.list.TaskList.55t0l81y8so0')}}
修改后效果：{{$t('task.list.TaskList.55t0l81y8so0', { i18n: 'i18n-创建多轮对话' })}}

修改前检索关键字：
文字->z.json unikey   z.json unikey->对应的页面
修改后检索关键字：
文字->对应的页面

// 使用不同的语法替换汉字对应的key到不同的位置
if (reg === propertyRegexp) {
    const prefix = temp.split('=')[0].replace(resoloveReg, ' :');
    const mainStr = temp.split('=')[1].replace(resoloveMainReg, '');
    const result = localeObj[mainStr];
    if (result) {
      **//$t("xx")   template下 属性替换
      return `${prefix}="$t('${result}',{ i18n: 'i18n-${mainStr}'})"`;**
    }
  } else {
    const resultStr = str.replace(resoloveReg, '');
    const result = localeObj[resultStr];
    if (result) {
      **//{{$t("xx")}}   template下 html替换
      if (reg === angleBracketSpaceRegexp) {
        return "{{$t('" + result + "',{ i18n: 'i18n-" + resultStr + "' })}}";
      }**

      if (reg === scriptRegexp) {
        //this.$t("xx")   script下 替换
        if (isScript) {
          if (isTypeScript) {
            return (
              **"(window as any).i18n.t('" +
              result +
              "',{ i18n: 'i18n-" +
              resultStr +
              "' })"**
            );
          } else {
            return (
              **"this.$t('" + result + "',{ i18n: 'i18n-" + resultStr + "' })"**
            );
          }
        }
        **//$t("xx")   template下 {{ "汉字" }}替换
        if (isTemplate) {
          return "$t('" + result + "',{ i18n: 'i18n-" + resultStr + "' })";
        }**
      }
    }
  }

全面展示

🖤 根据正则匹配文件所有已经替换的i18n key，在后方展示对应含义

结论

1、所有文件可通过快捷键或右键直接生成json文件

2、文件内会自动替换成相关key的内容（手动拼接除外），不用担心拼写错误 🤗

3、后期迭代，只有右键更新json和文件

4、代码可通过关键字直接搜索

本文作者：自如大前端研发中心-周英雪

招聘信息

自如大前端研发中心招募新同学！

FE/IOS/Android工程师看过来

公司福利有：

全额五险一金，并额外购买商业保险

免费健身房+年度体检

公司附近租房9折优惠

每年2次晋升机会办公地点：北京酒仙桥普天实业科技园欢迎对技术有执着热爱的你加入我们！简历请投递 zhangxl122@ziroom.com！

你不知道的国际化插件vue-swift-i18n