文档 Vue

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))

相关