Nuxt 2项目中批量为含$t的元素添加data-translation属性

当然可以实现批量自动添加，以下是几种可行方案，覆盖一次性修改源码和动态编译两种场景：

方案一：正则全局替换（一次性修改源码） #

适合快速批量处理现有代码，可通过编辑器或Node脚本完成：

编辑器全局替换（以VS Code为例） #

1. 打开全局替换面板（Ctrl+Shift+H），勾选「使用正则表达式」选项
2. 处理v-text场景：
   • 查找：<([^>]+)v-text="\$t\((['"])([^'\"]+)\1\)"([^>]*)>
   • 替换：<$1v-text="$t('$2')"$4 data-translation="$2">
3. 处理插值表达式场景（如<p>{{ $t('labels.hello') }}</p>）：
   • 查找：<([^>]+)>\s*{{\s*\$t\((['"])([^'\"]+)\1\)\s*}}
   • 替换：<$1 data-translation="$2">{{ $t('$2') }}</$1>

注意：正则仅匹配静态key的$t调用，动态拼接的key（如$t(labels.${id})）无法自动提取属性值，需手动处理。

Node脚本批量处理文件 #

如果项目文件较多，可写脚本遍历所有.vue文件自动替换：

const fs = require('fs');
const path = require('path');

// 处理单个.vue文件
function processFile(filePath) {
  let content = fs.readFileSync(filePath, 'utf8');
  
  // 替换v-text="$t('key')" 或 v-text="$t("key")"
  content = content.replace(/(<[^>]+v-text="\$t\((['"])([^'\"]+)\1\)"[^>]*>)/g, '$1 data-translation="$2"');
  
  // 替换{{ $t('key') }} 或 {{ $t("key") }}
  content = content.replace(/(<([^>]+)>\s*{{\s*\$t\((['"])([^'\"]+)\3\)\s*}})/g, '<$2 data-translation="$4">$1{{ $t(\'$4\') }}</$2>');
  
  fs.writeFileSync(filePath, content, 'utf8');
  console.log(`已处理：${filePath}`);
}

// 遍历目录下的所有.vue文件
function traverseDir(dir) {
  const files = fs.readdirSync(dir);
  files.forEach(file => {
    const fullPath = path.join(dir, file);
    const stat = fs.statSync(fullPath);
    if (stat.isDirectory()) {
      traverseDir(fullPath);
    } else if (fullPath.endsWith('.vue')) {
      processFile(fullPath);
    }
  });
}

// 执行替换（替换为你的项目目录）
traverseDir('./components');
traverseDir('./pages');

⚠️ 运行前请备份代码或提交Git，避免意外错误。

方案二：Vue编译时动态添加（无需修改源码） #

通过Nuxt插件修改Vue编译AST，自动为含$t的元素添加属性，后续新增代码也会自动生效：

1. 创建plugins/translation-attr.js：

export default ({ app }) => {
  app.config.compilerOptions.modules.push({
    preTransformNode(el) {
      // 处理v-text指令
      const textDirective = el.directives.find(dir => dir.name === 'text');
      if (textDirective) {
        const keyMatch = textDirective.expression.match(/^\$t\((['"])([^'\"]+)\1\)$/);
        if (keyMatch) {
          el.props.push({
            name: 'data-translation',
            value: JSON.stringify(keyMatch[2]),
            dynamic: false
          });
        }
      }

      // 处理插值表达式
      if (el.children) {
        el.children.forEach(child => {
          if (child.type === 2 && child.expression) {
            const keyMatch = child.expression.match(/^\$t\((['"])([^'\"]+)\1\)$/);
            if (keyMatch) {
              el.props.push({
                name: 'data-translation',
                value: JSON.stringify(keyMatch[2]),
                dynamic: false
              });
            }
          }
        });
      }

      return el;
    }
  });
};

2. 在nuxt.config.js中注册插件：

export default {
  plugins: [
    '~/plugins/translation-attr.js'
  ]
};

这种方案会在Vue编译模板时自动给符合条件的元素注入属性，无需手动修改源码。

注意事项 #

• 上述方案仅支持静态翻译key（如$t('labels.cartSell')），动态拼接的key（如$t(labels.${type})）无法提取固定属性值，需手动补充。
• 执行正则替换前，建议先在小范围文件测试正则匹配效果，避免误替换。

内容的提问来源于stack exchange，提问作者kozdro