ai-i18n

    Vanilla 快速上手

    开始前

    ai-i18n 要求 Vite 8 或更高版本，并且当前只支持浏览器端应用。需要 SSR、按请求选择语言或避免首屏 源码回退的项目，暂不适合接入当前版本。

    创建项目

    下面以 pnpm 和 TypeScript 模板为例：

    pnpm create vite ai-i18n-vanilla --template vanilla-ts
cd ai-i18n-vanilla
pnpm install
pnpm add @ai-i18n/vite@^1.0.0

    安装前请按版本选择与升级确认 npm 发布状态；尚无正式版时显式选择 @alpha。

    已有 Vite 项目可以跳过创建步骤，直接安装 @ai-i18n/vite@^1.0.0。

    配置 Vite

    在 vite.config.ts 中注册 aiI18n()。没有检测到 Vue 或 React Vite 插件时，插件自动使用 Vanilla 模式：

    import { aiI18n } from '@ai-i18n/vite';
import { defineConfig } from 'vite';

export default defineConfig({
  plugins: [
    aiI18n({
      sourceLang: 'zh-CN',
      locales: [
        { value: 'zh-CN', label: '中文' },
        { value: 'en-US', label: 'English' },
      ],
    }),
  ],
});

    翻译并更新 DOM

    从虚拟模块导入 Runtime API。Vanilla 模式需要在语言变化后主动更新 DOM：

    import { getLangs, setLang, subscribe, t } from 'virtual:ai-i18n';

function render() {
  document.querySelector('#app')!.textContent = t('保存');
}

render();
const unsubscribe = subscribe(render);

console.log(getLangs());
await setLang('en-US');

window.addEventListener('pagehide', () => unsubscribe(), { once: true });

    运行与验证

    pnpm dev
pnpm build

    开发服务器只提取浏览器实际请求过的模块。首次接入后应执行一次完整构建，确认入口可达源码均已 提取。生成文件及 Git 提交规则见生成文件与 Git。

    下一步