返回
国际化配置轻松实现多语言网站,打造全球化产品
前端
2023-09-11 03:31:09
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.json
和 zh-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 项目中轻松配置国际化。多语言支持将帮助您扩展业务范围,迎合全球受众。国际化开发是创建具有包容性和可扩展性产品的关键要素。
常见问题解答
-
如何添加新语言?
只需在
locales
目录下创建新的 JSON 文件,包含新语言的翻译即可。 -
如何获取当前语言?
使用
locale.value
可以获取当前语言。 -
可以在运行时更改语言吗?
可以,通过手动或动态方式切换语言,如本文所述。
-
如何翻译动态内容?
使用
$t
函数或i18n.t
方法翻译动态内容。 -
如何处理 HTML 中的文本?
使用
v-html
指令显示未翻译的 HTML 内容,或使用i18n-html
组件进行翻译。