ref: https://www.i18next.com/
在vue项目中安装相关依赖：
- i18next
- i18next-vue
- i18next-browser-languagedetector，用于检测用户语言
npm install i18next i18next-vue i18next-browser-languagedetector
创建i18n.js文件：
import i18next from 'i18next'
import I18NextVue from 'i18next-vue'
import LanguageDetector from 'i18next-browser-languagedetector'
i18next
.use(LanguageDetector)
.init({ // 初始化i18next
debug: true,
fallbackLng: 'en',
resources: {
en: {
translation: {
// 此处放置翻译内容
}
}
}
});
export default function (app) {
app.use(I18NextVue, { i18next })
return app
}
在main.js中导入i18n.js：
import { createApp } from 'vue'
import i18n from './i18n'
import App from './App.vue'
i18n(createApp(App)).mount('#app')
对于第一个文本，我们只使用一个简单的welcome key 来直接调用$t函数。$t或多或少与i18next.t相同。
对于第二个文本，我们使用v-html指令直接输出真正的HTML。
注意： 在您的网站上动态渲染任意HTML是非常危险的，因为它很容易导致XSS漏洞。只在可信内容上使用v-html，不要在用户提供的内容上使用。
// TranslationShowCase.vue
<template>
<div class="hello">
<h1>{{ $t('welcome') }}</h1>
<p v-html="$t('descr')"></p>
</div>
</template>
<script>
export default {
name: 'TranslationShowCase'
}
</script>
往i18n.js添加相关翻译文本：
...
...
resources: {
en: {
translation: {
welcome: 'Welcome to Your Vue.js App',
descr: 'For a guide and recipes on how to configure / customize '
+ 'this project,<br>check out the '
+ '<a href="https://cli.vuejs.org" target="_blank" '
+ 'rel="noopener">vue-cli documentation</a>.'
}
}
}
...
语言切换器
<template>
<div class="hello">
<h1>{{ $t('welcome') }}</h1>
<p v-html="$t('descr')"></p>
<hr />
<div>
<div v-if="languages">
<span v-for="(lng, index) in Object.keys(languages)" :key="lng">
<a v-if="$i18next.resolvedLanguage !== lng" v-on:click="$i18next.changeLanguage(lng)">
{{ languages[lng].nativeName }}
</a>
<strong v-if="$i18next.resolvedLanguage === lng">
{{ languages[lng].nativeName }}
</strong>
<span v-if="index < (Object.keys(languages).length - 1)"> | </span>
</span>
</div>
</div>
</div>
</template>
<script>
export default {
name: 'TranslationShowCase',
data () {
return {
languages: {
en: { nativeName: 'English' },
de: { nativeName: 'Deutsch' }
}
}
}
}
</script>
添加翻译文本：
// i18n.js
...
...
resources: {
en: {
translation: {
welcome: 'Welcome to Your Vue.js App',
descr: 'For a guide and recipes on how to configure / customize '
+ 'this project,<br>check out the '
+ '<a href="https://cli.vuejs.org" target="_blank" '
+ 'rel="noopener">vue-cli documentation</a>.'
}
},
de: {
translation: {
welcome: 'Willkommen zu Deiner Vue.js App',
descr: 'Eine Anleitung und Rezepte zum Konfigurieren/Anpassen '
+ 'dieses Projekts findest du<br>in der '
+ '<a href="https://cli.vuejs.org" target="_blank" '
+ 'rel="noopener">vue-cli-Dokumentation</a>.'
}
}
}
...
获取当前语言
自i18next v21以来，i18next. resolvedlanguage被设置为当前解析的语言，并且可以用作主要使用的语言，上例中有使用。
i18next.language vs. i18next.languages
i18next.language;
// 设置为当前检测或设置的语言
i18next.languages;
// 设置为将用于查找翻译值的语言代码数组
// 设置语言后，将使用新的语言代码填充此数组
// 除非被覆盖，否则将使用该代码的不太特定的版本填充此数组，以用于回退目的，然后是回退语言列表
// 初始化回退语言
i18next.init({
fallbackLng: ["es", "fr", "en-US", "dev"]
});
// 改变语言
i18next.changeLanguage("en-US-xx");
// 新语言和它的更一般的形式，然后是回退
i18next.languages; // ["en-US-xx", "en-US", "en", "es", "fr", "dev"]
// 再次改变语言
i18next.changeLanguage("de-DE");
// 不保留上一次设置的语言
i18next.languages; // ["de-DE", "de", "es", "fr", "en-US", "dev"]
处理复数和插值
可以看看另一篇博客文章用i18next使你的应用国际化-React
格式化
可以看看另一篇博客文章用i18next使你的应用国际化-React
Context
可以看看另一篇博客文章用i18next使你的应用国际化-React
分离翻译和代码
在i18next-http-backend的帮助下将翻译从代码中分离出来，并将它们放在专用的json文件中。
将翻译文件移动到public文件夹：
修改i18n.js文件，使用i18next-http-backend：
import i18next from 'i18next'
import I18NextVue from 'i18next-vue'
import LanguageDetector from 'i18next-browser-languagedetector'
import Backend from 'i18next-http-backend'
i18next
.use(Backend) // 从服务器加载翻译
.use(LanguageDetector)
.init({
debug: true,
fallbackLng: 'en'
});
export default function (app) {
app.use(I18NextVue, { i18next })
return app
}
现在翻译是异步加载的。如果您的网络连接很慢，可能会注意到，在翻译加载之前，只显示i18n key。
为了防止这种情况，我们使用了Vue.js的新Suspense功能。
首先，让我们通过导出i18next 初始化promise来调整i18n.js文件:
...
export const
i18nextPromise = i18next
.use(Backend)
.use(LanguageDetector)
.init({
debug: true,
fallbackLng: 'en'
});
...
在App.vue中使用该promise：
<template>
<img alt="Vue logo" src="./assets/logo.png">
<TranslationShowCase />
</template>
<script>
import TranslationShowCase from './components/TranslationShowCase.vue'
import { i18nextPromise } from './i18n.js'
export default {
name: 'App',
components: {
TranslationShowCase
},
// 与Subspense结合使用.
// 当翻译不在内存中时有用...
async setup() {
await i18nextPromise
return {}
}
}
</script>
创建Subspenser.vue组件：
<template>
<Suspense>
<template #default>
<App />
</template>
<template #fallback>
<div>
<img alt="Vue logo" src="./assets/logo.png">
<h1>Loading...</h1>
</div>
</template>
</Suspense>
</template>
<script>
import App from './App.vue'
export default {
name: 'Suspenser',
components: {
App
}
}
</script>
在main.js中使用：
import { createApp } from 'vue'
import i18n from './i18n'
import App from './Suspenser.vue'
i18n(createApp(App)).mount('#app')
现在，只要你的翻译被加载，你就会看到回退模板:
如果你想支持一种新的语言，你只需要创建一个新的文件夹和一个新的翻译json文件。这使您可以直接将翻译json发送给一些专业的翻译人员。或者，如果您正在使用翻译管理系统，您可以使用cli同步文件。
