vue-i18n-ast-loader

Vue 3 的 Webpack loader，使用 AST 解析实现 Vue SFC 文件的自动国际化转换。

安装

npm install vue-i18n-ast-loader
# 或
pnpm add vue-i18n-ast-loader

使用

// webpack.config.js
module.exports = {
  module: {
    rules: [
      {
        test: /\.vue$/,
        use: [
          'vue-loader',
          {
            loader: 'vue-i18n-ast-loader',
            options: {
              localesDir: 'locales',
              sourceLocale: 'zh-CN',
              translateFn: '$t',
              scriptTranslateFn: 't',
            },
          },
        ],
      },
    ],
  },
}

配置选项

| 选项 | 类型 | 默认值 | 说明 | |------|------|--------|------| | localesDir | string \| string[] | 'locales' | 语言包目录名（向上查找）或绝对路径，支持数组 | | localesRules | LocalesRule[] | [] | 路径匹配规则 | | sourceLocale | string | 'zh-CN' | 源语言代码 | | translateFn | string | '$t' | 模板中的翻译函数名 | | scriptTranslateFn | string | 't' | 脚本中的翻译函数名 | | debug | boolean | false | 是否输出调试信息 |

功能

• ✅ 转换 Vue 模板中的中文文本
• ✅ 转换 Vue 模板属性中的中文
• ✅ 转换脚本中的中文字符串
• ✅ @i18n-ignore 注释支持
• ✅ @i18n-ignore-start/end 区块忽略
• ✅ tt 模式支持
• ✅ 多语言包支持（localesDir 数组、向上查找）

示例

<!-- 转换前 -->
<template>
  <button>提交</button>
  <input placeholder="请输入" />
</template>

<script setup>
const msg = '欢迎使用'
</script>

<!-- 转换后 -->
<template>
  <button>{{ $t('button.submit') }}</button>
  <input :placeholder="$t('form.placeholder')" />
</template>

<script setup>
const msg = t('message.welcome')
</script>

多语言包支持

{
  loader: 'vue-i18n-ast-loader',
  options: {
    // 支持多个目录名，按优先级查找
    localesDir: ['locales', 'i18n', 'langs'],
    sourceLocale: 'zh-CN',
  },
}

License

MIT