Vue3 + Vite 多语言自动替换插件

这是一个 Vue3 + Vite 插件，旨在实现多语言自动替换功能。插件能够自动识别 Vue 组件中的中文文本，并将其替换为相应的国际化函数调用，以支持多语言。

功能特点

• 自动提取 Vue 模板和脚本中的中文文本。
• 将提取的中文文本替换为国际化函数调用。
• 支持处理 .vue、.js、.ts、.jsx 和 .tsx 文件。
• 在开发模式下实时更新语言文件。
• 在构建时创建新的语言包。

安装

1npm install rollup-i18n-auto-create-plugin
2# 或者
3yarn add rollup-i18n-auto-create-plugin

使用方法

1import RollupI18nCreatePlugin from 'rollup-i18n-auto-create-plugin'
2
3export default defineConfig({
4  plugins: [
5    RollupI18nCreatePlugin({
6      i18nPath: 'src/locales/zh-CN.ts',
7      langPath: ['src/locales/en.ts'],
8      injectToJS: `import { useI18n } from '@/hooks/web/useI18n'\nconst { t } = useI18n()`,
9      excludes: ['locale', 'useI18n', 'node_modules'],
10      jsText: 't',
11      tempText: 't',
12      regi18n: 'useI18n',
13      delay: 1000,
14      reserveKeys: ['test']
15    }),
16  ]
17})

选项说明

• i18nPath: 语言文件的路径。
• langPath: 打包的时候处理语言文件的路径数组。
• tempText: （可选）模板文本。
• excludes： (可选) 排除文件名称。
• jsText: （可选）JavaScript 模板文本。
• regi18n: 判断是否要出入以来的文本，如果已经有就不需要插入，存在如果是注释的时候没有办法兼容。
• injectToJS: （可选）要注入到 JavaScript 中的文本。
• delay: （可选）处理文件之间的延迟时间，默认为 1000。
• reserveKeys: (可选) 需要保留的key
• runBuild: (可选) 打包的时候是否需要执行整理多语言文件。

1i18nPath: string
2langPath: string[]
3regi18n: string
4excludes: string[]
5tempText: string
6jsText: string
7injectToJS?: string
8delay: number
9reserveKeys: string[]
10runBuild: boolean

工作原理

插件使用 @vue/compiler-sfc 解析 Vue 文件，并递归遍历 AST 以提取中文文本。对于 JavaScript 脚本，插件使用 Babel 解析和遍历 AST。提取的中文文本将被替换为国际化函数调用。

注意

该项目的默认配置是针对 element-plus-admin 项目， 在其他项目中没有认真测试过

1、针对 element-plus-admin 的项目修改

• src/hooks/web/useI18n.ts

2、在开发环境中使用该插件项目会比较卡顿，而且在修改中文的时候整个页面会在1s后才刷新因为这里我用了防抖，所以建议在生成环境中才开启

• 配置整理多语言文件

在打包环境下配置 runBuild: true, 会自动对语言文件进行整理

老项目转化

如果你是一个老的项目这种情况下要想愉快的使用该插件那么你就要把原来写的t(key) 转化成中文，我写了一份转化的代码，可供大家参考

下面转化代码不是万能的，这里只是针对了，大部分情况转化，组件属性比如 :title=t(key)，无法转化，剩余的自己手动处理吧！

1
2/*
3* 把你的中文映射文案的文件整理出来
4* */
5
6const fs = require('fs');
7const path = require('path');
8const { parse  } = require('@vue/compiler-sfc');
9const babelParser = require('@babel/parser');
10const babelTraverse = require('@babel/traverse').default;
11const jsgenerate = require('@babel/generator').default;
12const langMap = require('./zh-CN')
13
14// 处理vue文件
15function dwVueFile (file) {
16  let vueFileContent = fs.readFileSync(file, 'utf-8')
17  const { descriptor, errors } = parse(vueFileContent);
18
19  // 如果解析时发生错误，打印错误信息
20  if (errors && errors.length) {
21    console.error('Errors occurred while parsing the Vue file:', vuePath);
22    return;
23  }
24  const temp = dvVueCentent(descriptor.template)
25  if (temp) {
26    vueFileContent = vueFileContent.replace(descriptor.template.content, temp)
27  }
28  const dsScript = descriptor.script || descriptor.scriptSetup
29  let scriptTemp = dvTsCentent(dsScript.content)
30  if (scriptTemp) {
31    vueFileContent = vueFileContent.replace(dsScript.content, scriptTemp)
32  }
33  fs.writeFileSync(file, vueFileContent, 'utf-8');
34}
35
36// 处理js, ts，jsx等文件
37function dvTsFile (file) {
38  const content = fs.readFileSync(file, 'utf-8')
39  const code = dvTsCentent(content)
40  if (code) {
41    fs.writeFileSync(file, code, 'utf-8');
42  }
43}
44
45function dvTsCentent (content) {
46  if (!content) return;
47  const ast = babelParser.parse(content, {
48    sourceType: 'module',
49    plugins: ['jsx', 'typescript'],
50  });
51  let flag = false
52  babelTraverse(ast, {
53    CallExpression(path) {
54      try {
55        if (path.node.callee.name === 't') {
56          const pkey = objToStr(path.node.arguments[0].value)
57          if (pkey) {
58            if (path.parent.type === 'JSXExpressionContainer') {
59              if (path.parentPath.parent.type === 'JSXElement') {
60                // jsx 中的中文会带上双引号和单引号
61                path.parentPath.replaceWithSourceString(pkey)
62              } else {
63                // 这个是属性，和函数一类
64                path.parentPath.replaceWith({
65                  type: 'StringLiteral',
66                  value: pkey
67                })
68              }
69
70            } else {
71              path.replaceWithSourceString("'" + pkey + "'")
72            }
73            flag = true
74          }
75        }
76      } catch (e) { }
77    }
78  })
79  if (flag) {
80    return jsgenerate(ast, {
81      jsescOption: { minimal: true },
82    }).code
83  }
84}
85
86function dvVueCentent (template) {
87  if (!template || !template.content) {
88    console.log('No template content found.');
89    return;
90  }
91  let templateContent = template.content
92  // 全局替换正则
93  templateContent = templateContent.replace(/{{\s*t\('([^']+)'\)\s*}}/g, (_, matched) => {
94    return objToStr(matched) || '没有key'
95  });
96  return templateContent
97}
98
99// 替换为字符的函数和方法
100function objToStr (key) {
101  if (!key) return
102  try {
103    const keys = key?.split('.')
104    let objstr = langMap[keys[0]]
105    for (let i = 1; i < keys.length; i++) {
106      objstr = objstr[keys[i]]
107    }
108    return objstr
109  } catch (e) {
110    return `没有key ${key}`
111  }
112}
113
114// 读取文件夹中的.vue 文件
115function readVueFiles(dir) {
116  const vueFiles = [];
117  const jsFiles = []
118  // 递归函数来遍历目录
119  function traverseDirectory(currentPath) {
120    const files = fs.readdirSync(currentPath);
121    files.forEach(file => {
122      const filePath = path.join(currentPath, file);
123      const stat = fs.statSync(filePath);
124      if (stat.isDirectory()) {
125        // 如果是目录，则递归遍历
126        traverseDirectory(filePath);
127      } else if (path.extname(file) === '.vue') {
128        vueFiles.push(filePath);
129      } else if (['.ts', '.tsx', '.js'].includes(path.extname(file)) && !filePath.includes('locale')) {
130        jsFiles.push(filePath)
131      }
132    });
133  }
134  // 开始遍历
135  traverseDirectory(dir);
136  return {vue: vueFiles, js: jsFiles}
137}
138
139function init (dir) {
140  const {js, vue} = readVueFiles(dir)
141  js.forEach(file => {
142    dvTsFile(file)
143  })
144  vue.forEach(file => {
145    dwVueFile(file)
146  })
147}
148
149// 目录
150init('file\\src')
151

许可证

MIT

1请根据实际情况调整上述内容。如果您有其他需要添加的信息或者有特定的格式要求，请告诉我。