Vue
使用 i1n SDK 或 Bridge Mode 配合 vue-i18n 集成 i1n 与 Vue.js。
设置
在您的Vue项目中运行i1n init。CLI会自动检测是否存在vue-i18n,并在您的locales/目录中配置嵌套的JSON格式。
您可以独立使用 i1n SDK,也可以通过 Bridge Mode 连接到 vue-i18n。
独立模式
从 i1n 导入 init、t 和 setLocale。加载您的翻译资源,并在组件或模板中直接使用 t()。
这种方法完全取代了 vue-i18n。使用 Vue 插件或可组合函数,在整个应用程序中提供响应式的语言切换。
Vue-i18n 桥接模式
如果您的项目使用 vue-i18n,只需一行即可连接:registerI1n((key, params) => i18n.global.t(key, params))。i18n 的 t() 函数会委托给 vue-i18n,同时提供严格的类型检查。
i1n 管理 JSON 文件、AI 翻译和类型生成。vue-i18n 继续处理运行时加载、$t() 模板助手和 useI18n() 组合函数。零迁移成本。
部署
将 i1n pull 添加到您的构建步骤中。适用于基于 Vite 的 Vue 项目和 Nuxt。
i1n pull 生成的翻译文件与 vue-i18n 的基于文件的加载完全兼容。
src/App.vue
<template>
<h1>{{ $t('welcome') }}</h1>
</template>
<script setup>
import { useI18n } from 'vue-i18n'
const { t } = useI18n()
</script> Bridge Mode — src/i18n.ts
import { registerI1n } from 'i1n'
import { createI18n } from 'vue-i18n'
const i18n = createI18n({ /* ... */ })
registerI1n((key, params) => i18n.global.t(key, params))