vue项目要转国际化

背景

刚进入项目组，接到的需求是vue框架的项目转为国际化，语言不确定，先转英文。但是后期改成其他的语言，直接将中文的语言包，直接翻译引入即可。

涉及技术点

vue，vue-i18n，node的文件系统api，正则表达式

拆解问题，步骤如下

• 抽取中文，生成json文件

使用node的文件系统，将vue项目内的所有文件读取一遍，将文件内的的中文提取成数组

数据格式如下：
{  
    ".postcssrc.js": [    
        {      
            "en": "文档地址：",      
            "url": ".postcssrc.js"    
        }  
    ]
]
//后续机器翻译会直接将文件内的中文翻译成对应的语言

       此处是使用crowdin.com的机器翻译，将步骤1生成的json文件进行翻译

• 将翻译之后的文件生成对应格式的json文件

还是使用node的读写功能，将步骤1的文件翻译之后，进行数据整合。并且为了方便后续的插入，一个文件内的中文要去重，还要按照长度，由长到短的排列。这里还对每个单词增加了一个id，这是以后的变量名称，其实也可以用md5字符串代替，但是我觉得语意化更好一些。

比如：重要，重要的事情这两个词

这种中文就会出现如果先替换“重要”，那么“重要的事情” 就会有问题

4.  将步骤3的json，插入到项目中

经过多次的尝试，在vue模板中找到规律，进行字符串截取

<Tooltip style="margin-left:14px;" content="今日需到写一篇博文，数据逻辑需同时满足：1）你好，世界 2）啦啦啦 3）3秒之后世界末日" max-width="200">

5. 将步骤3的json，生成语言包

这里只处理components和view里面的文件。

按照原有的文件夹，生成对应的语言包。

生成lang=>zh-cn和en文件夹，以及index.js和文件对应的语言收集文件

每个文件内容大致如下：
export default {  
    query: 'Inquire',  
    reset: 'Reset',  
    createAUser: 'Create user',
}

6. 使用vue-i18n，完成引用

除了vue-i18n的引用，还需要注意，ui框架提供的语言包的引用

import Vue from 'vue'
import VueI18n from 'vue-i18n'
import { localRead, localSave } from '@/libs/util'
import customZhCn from './lang/zh-CN/index'
import customEnUs from './lang/en/index'

Vue.use(VueI18n)let lang = 'en_in'
Vue.config.lang = lang
// vue-i18n 6.x+写法
const messages = {  
    en_in: { ...customEnUs,  }, 
    zh_cn: { ...customZhCn,  },
}
const i18n = new VueI18n({  locale: lang,  messages,})
export default i18n

7. 到这里，感觉像是弄完。但是万万没想到后面，转为英文之后，字符串变长，很多会样式被收缩。后面就只能靠自己手工了。～_～

8. 后感

最重要的是，我这里还没有考虑到性能问题。如果一个项目有个成千上万个文件呢？>_<

这是掘金的第一篇文章，希望大家喜欢，也希望大家多多提意见。

插件的码云地址：gitee.com/wisdom_QQ/t…