@anthropic/vue-auto-i18n

Vue 自动国际化插件 - 中文即开发语言，编译时自动转换

✨ 特性

• 🚀 零侵入开发：直接写中文，编译时自动转换为 $t('key')
• 📦 完全解耦：插件只包含翻译逻辑，语言管理由用户控制
• 🔧 高度可定制：语言存储、初始化、切换逻辑均可自定义
• 🔄 Fallback 兜底：当前语言缺少翻译时，自动使用兜底语言
• ⚡ 高性能：多级缓存 + Worker 并行
• 🌐 灵活参数格式：支持 %AA、$BB、{name} 等多种格式

📦 安装

npm install @anthropic/vue-auto-i18n
# or
pnpm add @anthropic/vue-auto-i18n
# or
yarn add @anthropic/vue-auto-i18n

🚀 快速开始

1. 创建语言包

src/locales/
├── index.ts          # 语言管理模块
├── zh-CN.json        # 中文
└── en-US.json        # 英文

zh-CN.json：

{
  "submit": "提交",
  "cancel": "取消",
  "welcome": "欢迎，{name}"
}

index.ts：

import { ref } from 'vue'
import zhCN from './zh-CN.json'
import enUS from './en-US.json'

export const messages = { 'zh-CN': zhCN, 'en-US': enUS }
export const availableLangs = Object.keys(messages)
export const currentLang = ref('zh-CN')

export function setLang(lang: string) {
  currentLang.value = lang
  sessionStorage.setItem('lang', lang)
  location.reload()
}

export function getLang() {
  return currentLang.value
}

2. 配置 Vite 插件

// vite.config.ts
import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
import autoI18n from '@anthropic/vue-auto-i18n/vite'

export default defineConfig({
  plugins: [
    autoI18n({
      localesDir: 'src/locales',
      sourceLocale: 'zh-CN',
    }),
    vue(),
  ],
})

3. 安装到 Vue

// main.ts
import { createApp } from 'vue'
import { setupLangs } from '@anthropic/vue-auto-i18n'
import * as localeModule from './locales'
import App from './App.vue'

const app = createApp(App)

await setupLangs(app, {
  localeModule,
  fallbackLang: 'zh-CN',
})

app.mount('#app')

4. 开始使用

<template>
  <!-- 直接写中文，编译时自动转换 -->
  <button>提交</button>
  <button>取消</button>
  
  <!-- 带参数 -->
  <p>{{ $t('welcome', { name: 'Tom' }) }}</p>
  
  <!-- 语言切换 -->
  <LocaleSwitcher />
</template>

<script setup>
import { LocaleSwitcher, useLang } from '@anthropic/vue-auto-i18n'

const { lang, setLang, t } = useLang()
</script>

📖 API

setupLangs(app, config)

interface SetupConfig {
  localeModule: LocaleModule  // 用户语言模块
  fallbackLang?: string       // 兜底语言
  warnOnMissing?: boolean     // 警告缺失翻译
}

LocaleModule 接口

interface LocaleModule {
  messages: Record<string, Record<string, string>>
  currentLang: Ref<string>
  availableLangs: string[]
  setLang: (lang: string) => void
  getLang: () => string
  replaceParams?: (text: string, params: Record<string, any>) => string
  langMap?: Record<string, { name: string; flag: string }>
}

useLang()

const {
  lang,         // 当前语言
  langs,        // 可用语言列表
  langName,     // 当前语言名称
  langFlag,     // 当前语言国旗
  t,            // 翻译函数
  setLang,      // 切换语言
  getLangName,  // 获取语言名称
  getLangFlag,  // 获取语言国旗
} = useLang()

t(key, params?)

t('submit')                    // "提交"
t('welcome', { name: 'Tom' })  // "欢迎，Tom"
t('count', { AA: 10 })         // "共%AA条" → "共10条"

🔧 Vite 插件配置

autoI18n({
  localesDir: 'src/locales',  // 语言包目录
  sourceLocale: 'zh-CN',      // 源语言
  translateFn: '$t',          // 翻译函数名
  debug: false,               // 调试模式
  cache: { enabled: true },   // 缓存配置
})

🔄 编译时转换

| 编译前 | 编译后 | |--------|--------| | <span>提交</span> | <span>{{ $t('submit') }}</span> | | placeholder="请输入" | :placeholder="$t('please_enter')" | | {{ flag ? '是' : '否' }} | {{ flag ? $t('yes') : $t('no') }} |

📄 License

MIT