返回

国际化配置轻松实现多语言网站,打造全球化产品

前端

Vite + Vue 3 + TS + Pinia + Naive UI 国际化配置指南

准备工作

开启多语言之旅的第一步是进行必要的准备工作。首先,通过命令行工具安装必需的依赖项:

pnpm add @vueuse/head
pnpm add @unocss/icons
pnpm add @unocss/vue
pnpm add unocss

接着,我们需要配置 VueI18n。使用以下命令安装:

pnpm add vue-i18n

并在 main.ts 中注册它:

import { createApp } from 'vue'
import { createPinia } from 'pinia'
import App from './App.vue'
import router from './router'
import vueI18n from './locales'

const app = createApp(App)

app.use(createPinia())
app.use(router)
app.use(vueI18n)

app.mount('#app')

创建本地化文案

为了提供多语言支持,我们需要创建本地化文案。在 locales 目录下新建两个 JSON 文件:en.jsonzh-CN.json,分别代表英文和中文语言包。

// en.json
{
  "title": "Hello Vite + Vue3 + TS + Pinia + Naive UI",
  "button": "Click Me"
}

// zh-CN.json
{
  "title": "你好 Vite + Vue3 + TS + Pinia + Naive UI",
  "button": "点我"
}

切换语言

有两种方式可以切换语言:手动和动态。

手动切换语言

使用 useI18n 钩子函数可以手动切换语言:

import { useI18n } from 'vue-i18n'

const { t, locale } = useI18n()

locale.value = 'en' // 切换到英文

动态切换语言

借助 watch 函数,可以动态监听语言的变化:

import { watch } from 'vue'
import { useI18n } from 'vue-i18n'

const { t, locale } = useI18n()

watch(locale, (newLocale, oldLocale) => {
  console.log(`语言已切换:${oldLocale} -> ${newLocale}`)
})

组件国际化

Naive UI 组件国际化

Naive UI 组件支持国际化。可以使用 t 函数翻译组件的文案:

<NButton>{{ t('button') }}</NButton>

总结

通过遵循本指南,您可以在 Vite + Vue 3 + TS + Pinia + Naive UI 项目中轻松配置国际化。多语言支持将帮助您扩展业务范围,迎合全球受众。国际化开发是创建具有包容性和可扩展性产品的关键要素。

常见问题解答

  1. 如何添加新语言?

    只需在 locales 目录下创建新的 JSON 文件,包含新语言的翻译即可。

  2. 如何获取当前语言?

    使用 locale.value 可以获取当前语言。

  3. 可以在运行时更改语言吗?

    可以,通过手动或动态方式切换语言,如本文所述。

  4. 如何翻译动态内容?

    使用 $t 函数或 i18n.t 方法翻译动态内容。

  5. 如何处理 HTML 中的文本?

    使用 v-html 指令显示未翻译的 HTML 内容,或使用 i18n-html 组件进行翻译。