Nuxt的国际化终极解决方案:I18n+Nuxt Content
出海大潮,国内用得很多的Vue和Nuxt也经常要面对国际化的问题。
如果是wordpress的话,就简单了,装一个插件,配置好Google的翻译接口,然后系统就会每天将新的内容自动翻译成各种语言版本。
但对于其它的系统,就不那么方便了。
代码已开源:https://github.com/aigc-projects/nuxt-i18n-starter
一、基本的国际化——I18n
nuxt-i18n
1、什么是I18n?
I18n是Nuxt国际化的必须的东西。它主要是提供了一套完整的国际化的解决方案,包括国际化路由、和基于国际化路由改变语言的方法。
2、安装I18n
以下都可以。
yarn add @nuxtjs/i18n # yarn
npm i @nuxtjs/i18n # npm
pnpm i @nuxtjs/i18n
pnpm add @nuxtjs/i18n@next --save-dev
3、配置nuxt.config.ts
modules: [
'@nuxtjs/i18n',
],
i18n: {
locales: [
{ name: "English",code: "en", iso: "en-US", dir: "ltr" },
{ name: "español",code: "es", iso: "es-LA", dir: "ltr" },
{ name: "En français",code: "fr", iso: "fr-FR", dir: "ltr" },
{ name: "العربية",code: "ar", iso: "ar-EG", dir: "rtl" },],
defaultLocale: "en",
detectBrowserLanguage: false,
// 👇 Reference the Vue I18n config file
vueI18n: "./i18n.config.js",
},
4、配置i18n.config.ts
新建i18n.config.ts或i18n.config.js
这个文件是用来配置翻译字段的。
export default defineI18nConfig(() => ({
legacy: false,
// 👇 Add translations
messages: {
"en": {
nav_about: "About",
},
"es": {
nav_about: "sobre",
},
"ar": {
nav_about: "نبذة عنا",
},
"fr": {
nav_about: "About",
},
},
}))
5、链接组件
代码
<!-- components/LocLink.vue -->
<script setup lang="ts">
defineProps(["to"])
const localePath = useLocalePath()
</script>
<template>
<NuxtLink :to="localePath(to)"><slot /></NuxtLink>
</template>
用法
<LocLink to="/">{{ $t('nav_home') }}</LocLink>
6、语言切换组件
代码
<!-- components/LangSwitcher.vue -->
<script setup lang="ts">
// Used for type casting
// Used for type casting
import type { LocaleObject } from "@nuxtjs/i18n/dist/runtime/composables";
// Get active locale and supported locales
const { locale, locales } = useI18n()
// Cast to avoid TypeScript errors in template
const supportedLocales = locales.value as Array<LocaleObject>
const router = useRouter()
const switchLocalePath = useSwitchLocalePath()
// When the visitor selects a new locale, route to
// to the new locale's path e.g. /en-CA/foo → /ar-EG/foo
function onLocaleChanged(event: Event) {
const target = event.target as HTMLInputElement
// switchLocalePath('ar-EG') will return Arabic equivalent
// for the *current* URL path e.g. if we're at /en-CA/about,
// switchLocalePath('ar-EG') will return '/ar-EG/about'
router.push({ path: switchLocalePath(target.value) })
}
</script>
<template>
<div>
🌐
<select :value="locale" @change="onLocaleChanged">
<option v-for="loc in supportedLocales" :key="loc.code" :value="loc.code">
{{ loc.name }}
</option>
</select>
</div>
</template>
用法
在页面或布局中使用标签:<LangSwitcher />
7、获取当前的语言
context.app.i18n.locale // where you have access to NuxtContext
this.$i18n.locale //in component
$i18n.locale // in template
二、文档内容的国际化
单独使用I18n完全可以实现全站的国际化。但如果网站有很多文章,那么就需要在i18n.config.ts中写入大量的配置项,相当麻烦。
当然,如果文章内容来源于后端数据库,那么就不用考虑这个了,只需要将翻译好的内容存入数据库,不同的语言页面取相应语言的文章版本就可以了。
这里说的是,文章内容没有在后端数据库,而是放在前端。
对于nuxt来说,最好的方法就是使用nuxt content。简单地说,就是将文章都存在markdown文件中,然后,打开某个路由就会加载这个路由对应的页面和markdown文件。
因为同样的页面,比如首页,不同的语言,使用的路由是不同的。
比如,默认英语。首页是www.xxx.com, 西班牙语版就是www.xxx.com/es。
所以www.xxx.com会调用pages目录下的index.vue,并加载content目录下的index.md。而,www.xxx.com/es会调用pages目录下的index.vue,并加载content目录下的es.md文档。
所以,对同一篇文章的不同语言的版本,只需要在content目录下按照路由建相应版本的翻译文件即可。
1、安装nuxt content
pnpm add @nuxt/content
2、nuxt.config.ts配置
modules: [
'@nuxt/content'
],
content: {
// ... options
}
3、在页面调用相应翻译文档
首页默认英语,配置西班牙语路由和页面。
最后的路由是这样的:
默认首页(英语):www.xxx.com
西班牙语首页:www.xxx.com/es
首先,设计content的文件目录
//content目录设计
|
pages
. index.vue
content
. index.md
. es.md
然后,在首页中需要调用文章的部分加标签
<ContentDoc />
三、国际化路由的最佳实践
en-US,en表示英语,US表示国家:美国。这是一个标准的语言代码。路由可以直接这样来写:www.xxx.com/en-US
但是,大多时候,我们不需要细分到国家的层次,只需要到语言的层次就够了。所以,这样写,反而是最合适的:www.xxx.com/en
当然,对于中文,就不能这样了,中文有:zh-CN(简体中文),zh-HK(香港繁体),zh-TW(台湾繁体)
所以,对于中文,只能这样:www.xxx.com/zh-cn
四、附录:国际标准的语言代码
语言代码 | 语言国家 |
---|---|
af | 南非语 |
af-ZA | 南非语 |
ar | 阿拉伯语 |
ar-AE | 阿拉伯语(阿联酋) |
ar-BH | 阿拉伯语(巴林) |
ar-DZ | 阿拉伯语(阿尔及利亚) |
ar-EG | 阿拉伯语(埃及) |
ar-IQ | 阿拉伯语(伊拉克) |
ar-JO | 阿拉伯语(约旦) |
ar-KW | 阿拉伯语(科威特) |
ar-LB | 阿拉伯语(黎巴嫩) |
ar-LY | 阿拉伯语(利比亚) |
ar-MA | 阿拉伯语(摩洛哥) |
ar-OM | 阿拉伯语(阿曼) |
ar-QA | 阿拉伯语(卡塔尔) |
ar-SA | 阿拉伯语(沙特阿拉伯) |
ar-SY | 阿拉伯语(叙利亚) |
ar-TN | 阿拉伯语(突尼斯) |
ar-YE | 阿拉伯语(也门) |
az | 阿塞拜疆语 |
az-AZ | 阿塞拜疆语(拉丁文) |
az-AZ | 阿塞拜疆语(西里尔文) |
be | 比利时语 |
be-BY | 比利时语 |
bg | 保加利亚语 |
bg-BG | 保加利亚语 |
bs-BA | 波斯尼亚语(拉丁文,波斯尼亚和黑塞哥维那) |
ca | 加泰隆语 |
ca-ES | 加泰隆语 |
cs | 捷克语 |
cs-CZ | 捷克语 |
cy | 威尔士语 |
cy-GB | 威尔士语 |
da | 丹麦语 |
da-DK | 丹麦语 |
de | 德语 |
de-AT | 德语(奥地利) |
de-CH | 德语(瑞士) |
de-DE | 德语(德国) |
de-LI | 德语(列支敦士登) |
de-LU | 德语(卢森堡) |
dv | 第维埃语 |
dv-MV | 第维埃语 |
el | 希腊语 |
el-GR | 希腊语 |
en | 英语 |
en-AU | 英语(澳大利亚) |
en-BZ | 英语(伯利兹) |
en-CA | 英语(加拿大) |
en-CB | 英语(加勒比海) |
en-GB | 英语(英国) |
en-IE | 英语(爱尔兰) |
en-JM | 英语(牙买加) |
en-NZ | 英语(新西兰) |
en-PH | 英语(菲律宾) |
en-TT | 英语(特立尼达) |
en-US | 英语(美国) |
en-ZA | 英语(南非) |
en-ZW | 英语(津巴布韦) |
eo | 世界语 |
es | 西班牙语 |
es-AR | 西班牙语(阿根廷) |
es-BO | 西班牙语(玻利维亚) |
es-CL | 西班牙语(智利) |
es-CO | 西班牙语(哥伦比亚) |
es-CR | 西班牙语(哥斯达黎加) |
es-DO | 西班牙语(多米尼加共和国) |
es-EC | 西班牙语(厄瓜多尔) |
es-ES | 西班牙语(传统) |
es-ES | 西班牙语(国际) |
es-GT | 西班牙语(危地马拉) |
es-HN | 西班牙语(洪都拉斯) |
es-MX | 西班牙语(墨西哥) |
es-NI | 西班牙语(尼加拉瓜) |
es-PA | 西班牙语(巴拿马) |
es-PE | 西班牙语(秘鲁) |
es-PR | 西班牙语(波多黎各(美)) |
es-PY | 西班牙语(巴拉圭) |
es-SV | 西班牙语(萨尔瓦多) |
es-UY | 西班牙语(乌拉圭) |
es-VE | 西班牙语(委内瑞拉) |
et | 爱沙尼亚语 |
et-EE | 爱沙尼亚语 |
eu | 巴士克语 |
eu-ES | 巴士克语 |
fa | 法斯语 |
fa-IR | 法斯语 |
fi | 芬兰语 |
fi-FI | 芬兰语 |
fo | 法罗语 |
fo-FO | 法罗语 |
fr | 法语 |
fr-BE | 法语(比利时) |
fr-CA | 法语(加拿大) |
fr-CH | 法语(瑞士) |
fr-FR | 法语(法国) |
fr-LU | 法语(卢森堡) |
fr-MC | 法语(摩纳哥) |
gl | 加里西亚语 |
gl-ES | 加里西亚语 |
gu | 古吉拉特语 |
gu-IN | 古吉拉特语 |
he | 希伯来语 |
he-IL | 希伯来语 |
hi | 印地语 |
hi-IN | 印地语 |
hr | 克罗地亚语 |
hr-BA | 克罗地亚语(波斯尼亚和黑塞哥维那) |
hr-HR | 克罗地亚语 |
hu | 匈牙利语 |
hu-HU | 匈牙利语 |
hy | 亚美尼亚语 |
hy-AM | 亚美尼亚语 |
id | 印度尼西亚语 |
id-ID | 印度尼西亚语 |
is | 冰岛语 |
is-IS | 冰岛语 |
it | 意大利语 |
it-CH | 意大利语(瑞士) |
it-IT | 意大利语(意大利) |
ja | 日语 |
ja-JP | 日语 |
ka | 格鲁吉亚语 |
ka-GE | 格鲁吉亚语 |
kk | 哈萨克语 |
kk-KZ | 哈萨克语 |
kn | 卡纳拉语 |
kn-IN | 卡纳拉语 |
ko | 朝鲜语 |
ko-KR | 朝鲜语 |
kok | 孔卡尼语 |
kok-IN | 孔卡尼语 |
ky | 吉尔吉斯语 |
ky-KG | 吉尔吉斯语(西里尔文) |
lt | 立陶宛语 |
lt-LT | 立陶宛语 |
lv | 拉脱维亚语 |
lv-LV | 拉脱维亚语 |
mi | 毛利语 |
mi-NZ | 毛利语 |
mk | 马其顿语 |
mk-MK | 马其顿语(FYROM) |
mn | 蒙古语 |
mn-MN | 蒙古语(西里尔文) |
mr | 马拉地语 |
mr-IN | 马拉地语 |
ms | 马来语 |
ms-BN | 马来语(文莱达鲁萨兰) |
ms-MY | 马来语(马来西亚) |
mt | 马耳他语 |
mt-MT | 马耳他语 |
nb | 挪威语(伯克梅尔) |
nb-NO | 挪威语(伯克梅尔)(挪威) |
nl | 荷兰语 |
nl-BE | 荷兰语(比利时) |
nl-NL | 荷兰语(荷兰) |
nn-NO | 挪威语(尼诺斯克)(挪威) |
ns | 北梭托语 |
ns-ZA | 北梭托语 |
pa | 旁遮普语 |
pa-IN | 旁遮普语 |
pl | 波兰语 |
pl-PL | 波兰语 |
pt | 葡萄牙语 |
pt-BR | 葡萄牙语(巴西) |
pt-PT | 葡萄牙语(葡萄牙) |
qu | 克丘亚语 |
qu-BO | 克丘亚语(玻利维亚) |
qu-EC | 克丘亚语(厄瓜多尔) |
qu-PE | 克丘亚语(秘鲁) |
ro | 罗马尼亚语 |
ro-RO | 罗马尼亚语 |
ru | 俄语 |
ru-RU | 俄语 |
sa | 梵文 |
sa-IN | 梵文 |
se | 北萨摩斯语 |
se-FI | 北萨摩斯语(芬兰) |
se-FI | 斯科特萨摩斯语(芬兰) |
se-FI | 伊那里萨摩斯语(芬兰) |
se-NO | 北萨摩斯语(挪威) |
se-NO | 律勒欧萨摩斯语(挪威) |
se-NO | 南萨摩斯语(挪威) |
se-SE | 北萨摩斯语(瑞典) |
se-SE | 律勒欧萨摩斯语(瑞典) |
se-SE | 南萨摩斯语(瑞典) |
sk | 斯洛伐克语 |
sk-SK | 斯洛伐克语 |
sl | 斯洛文尼亚语 |
sl-SI | 斯洛文尼亚语 |
sq | 阿尔巴尼亚语 |
sq-AL | 阿尔巴尼亚语 |
sr-BA | 塞尔维亚语(拉丁文,波斯尼亚和黑塞哥维那) |
sr-BA | 塞尔维亚语(西里尔文,波斯尼亚和黑塞哥维那) |
sr-SP | 塞尔维亚(拉丁) |
sr-SP | 塞尔维亚(西里尔文) |
sv | 瑞典语 |
sv-FI | 瑞典语(芬兰) |
sv-SE | 瑞典语 |
sw | 斯瓦希里语 |
sw-KE | 斯瓦希里语 |
syr | 叙利亚语 |
syr-SY | 叙利亚语 |
ta | 泰米尔语 |
ta-IN | 泰米尔语 |
te | 泰卢固语 |
te-IN | 泰卢固语 |
th | 泰语 |
th-TH | 泰语 |
tl | 塔加路语 |
tl-PH | 塔加路语(菲律宾) |
tn | 茨瓦纳语 |
tn-ZA | 茨瓦纳语 |
tr | 土耳其语 |
tr-TR | 土耳其语 |
ts | 宗加语 |
tt | 鞑靼语 |
tt-RU | 鞑靼语 |
uk | 乌克兰语 |
uk-UA | 乌克兰语 |
ur | 乌都语 |
ur-PK | 乌都语 |
uz | 乌兹别克语 |
uz-UZ | 乌兹别克语(拉丁文) |
uz-UZ | 乌兹别克语(西里尔文) |
vi | 越南语 |
vi-VN | 越南语 |
xh | 班图语 |
xh-ZA | 班图语 |
zh | 中文 |
zh-CN | 中文(简体) |
zh-HK | 中文(香港) |
zh-MO | 中文(澳门) |
zh-SG | 中文(新加坡) |
zh-TW | 中文(繁体) |
zu | 祖鲁语 |
zu-ZA | 祖鲁语 |
链接
https://github.com/aigc-projects/nuxt-i18n-starter