python提取vue文件里中文字体

使用python提取vue项目的中文字体，整理成多语言

由于公司项目需求，要把之前开发好的vue后台管理系统加上多语言。百度了一下，使用vue-i18n，把翻译的语言整理成变量，放到多语言配置里，非常方便。然后把vue文件里的中文提取出来，整理到多语言配置里，不能有重复的。如果手工一个一个弄的话很费时间，且容易出错，这里使用python和正则表达式提取代码文件里的中文，再替换成相应的变量。概括整个思路就是，找到指定目录下以 .vue结尾的所有文件，依次提取文件里的中文字符，以键值对的形式保存为对象：

// 多语言中文配置
const zh = {
   
  code_1: '标题',
  code_2: '菜单'
}

然后把文件里的中文替换为代码：

<div :title="$t('code_1')">
   {
   {
    $t('code_1') }} // 标题
 </div>
 let title = this.$t('code_1')

中文存在的几种情况：

// 标签内
<div> 标题 </div>
// 标签内换行的
<div>
  标题
</div>
// 标签属性
<div title="标题" title-t-t="标题"></div>
// js代码
let title = "标题"

对应提取中文的正则表达式：

// 匹配html结束标签 </ 之前的中文字符
reg_1 = '([\u4E00-\u9FA5]+\s?\w+)(?=\<\/)'
// 匹配中文字符，且前边跟随空格
reg_2 = '(?<=\s)([\u4E00-\u9FA5]+\w+)'
// 匹配带有中文的标签属性
reg_3 = '(\w+-?)+="\w*([\u4E00-\u9FA5])+.*?"' 
// 匹配js代码中中文
reg_4 = '(\"|\'|`)[\u4E00-\u9FA5]+\w+(\?|\？|\！|\!)?(\"|\'|`)'

了解到这几种情况后就开始编写代码。

第 1 步：获取目录下所有的vue文件路径

def getAllVueFile(dir_path):
  a = []   
  for root, dirs, files in os.walk(dir_path):  
    for file in files:  
      if os.path.splitext(file)[1] == '.vue':  
        a.append(os.path.join(root, file))
  return a