Vite i18n
使用 Vite 做 i18n，不拖慢开发
在 Vite 项目中使用 Better I18N，保持热更新迅速、翻译键类型化，并让各语言内容在应用和营销页面上都易于发布。
Setup
Get started in 3 steps
安装适配 React 的 SDK
对大多数 Vite 项目，先从 @better-i18n/use-intl 和 use-intl 开始，让翻译在标准组件树中生效。
terminal
npm install @better-i18n/use-intl use-intlWrap your app once
在 Vite 入口文件中挂载 BetterI18nProvider，使语言数据在首次渲染前就已就绪。
src/main.tsx
import React from 'react';
import ReactDOM from 'react-dom/client';
import { BetterI18nProvider } from '@better-i18n/use-intl';
import App from './App';
ReactDOM.createRoot(document.getElementById('root')!).render(
<BetterI18nProvider project="your-org/your-project" locale="en">
<App />
</BetterI18nProvider>
);在组件内部完成翻译
使用类型化 hook 处理键和插值，同时在内容迭代过程中保持 Vite 热更新的速度。
src/components/Hero.tsx
import { useTranslations } from '@better-i18n/use-intl';
export function Hero() {
const t = useTranslations('landing');
return <h1>{t('headline')}</h1>;
}Capabilities
为什么在 Vite 中使用 Better I18N？
借助 Vite HMR 快速本地迭代，同时保持翻译键的类型化
适用于 React、Vue 以及其他基于 Vite 的前端
通过 CDN 分发文案，让构建更轻、更新更快
适合营销站点、仪表盘和混合式应用外壳
从手写 JSON 文件迁移的团队可以轻松上手
让框架特有的复杂度不进入你的翻译工作流
Example
Typical Vite setup
为需要类型化翻译和快速迭代的 Vite 应用提供的最简 provider 配置。
import { BetterI18nProvider, useTranslations } from '@better-i18n/use-intl';
function LandingHero() {
const t = useTranslations('landing');
return (
<section>
<h1>{t('headline')}</h1>
<p>{t('subheadline')}</p>
</section>
);
}
export default function App() {
return (
<BetterI18nProvider project="your-org/your-project" locale="en">
<LandingHero />
</BetterI18nProvider>
);
}Related guides
Other frameworks
Get started
更快发布本地化的 Vite 应用
保持开发速度，把翻译纳入真正的工作流，无需手动编辑语言文件即可发布更新。