Vue3?接入?i18n?實現(xiàn)國際化多語言案例分析
1. 基本方法
在 Vue.js 3 中實現(xiàn)網頁的國際化多語言，最常用的包是 vue-i18n，通常我們會與 vue-i18n-routing 一起使用。
vue-i18n 負責根據當前頁面的語言渲染文本占位符，例如：
<span>{{ t('Login') }}</span>當語言設置為中文時，會將 Login 渲染為“登錄”。
vue-i18n-routing 負責將頁面語言與 URL 綁定，例如：
https://githubstar.pro/zh-CN/repo
表示訪問中文版的 /repo 路徑。
將不同語言的網頁放在不同的 URL 下有助于 SEO，因為可以在 <head> 部分添加語言信息，增加不同語言被搜索引擎索引的概率。
Google 對于多語言 Vue 站點的爬取機制如下：
- 類似 Vue 站點的 JS 動態(tài)頁面是可以被爬取的，不影響權重 (參見 Google SEO)。
- 與用戶首選語言匹配的頁面將優(yōu)先展示 (參見 Google SEO)。
2. 基礎實現(xiàn)
第一步，安裝一個 Vite 下使用 <i18n> 標簽的插件：unplugin-vue-i18n。
然后調整 vite.config.js：
import { fileURLToPath, URL } from 'node:url';
import { defineConfig } from 'vite';
import vue from '@vitejs/plugin-vue';
import VueDevTools from 'vite-plugin-vue-devtools';
import VueI18nPlugin from '@intlify/unplugin-vue-i18n/vite';
export default defineConfig({
plugins: [
vue(),
VueDevTools(),
VueI18nPlugin({}),
],
resolve: {
alias: {
'@': fileURLToPath(new URL('./src', import.meta.url)),
},
},
});添加插件后，我們可以在組件內使用 <i18n> 塊：
<script setup lang="ts">
import { useI18n } from 'vue-i18n';
const { t, locale } = useI18n({ inheritLocale: true, useScope: 'local' });
</script>
<template>
<span>{{ t('Login') }}</span>
</template>
<i18n lang="yaml">
en:
Login: 'Login to web'
zh-CN:
Login: '登錄'
</i18n>這里我們定義了兩種不同的語言。
3. 路徑綁定
接下來，我們需要定義使用 URL 作為當前語言，編輯 router/index.ts：
import { createRouter as _createRouter, type RouteLocationNormalized } from 'vue-i18n-routing';
import { createWebHistory } from 'vue-router';
import HomeView from '@/views/HomeView.vue';
const locales = [
{
code: 'en',
iso: 'en-US',
name: 'English',
},
{
code: 'zh-CN',
iso: 'zh-CN',
name: '中文',
},
];
export function createRouter(i18n: any) {
const router = _createRouter(i18n, {
version: 4,
locales: locales,
defaultLocale: 'zh-CN',
history: createWebHistory(import.meta.env.BASE_URL),
routes: [
{
path: '/home',
name: 'home',
component: HomeView,
},
],
});
return router;
}我們定義了支持的語言種類，并將原來的 routes 包裝起來，vue-i18n-routing 會自動生成所有支持語言的 routes：
/home= 中文/en/home= 英文
由于我們設置了 defaultLocale: 'zh-CN'，默認路徑為中文。
然后，我們需要將源代碼中涉及跳轉的部分，例如：
router.push({ name: 'home' });全部加上 localePath，表示是當前語言的 URL 路徑下：
import { useLocalePath } from 'vue-i18n-routing';
const localePath = useLocalePath();
router.push(localePath({ name: 'home' }));這樣就完成了路徑綁定。
4. 自動切換
有時，我們希望沒有默認語言，而是根據用戶的瀏覽器語言自動選擇：
/zh-CN/home= 中文/en/home= 英文/home-> 重定向 (瀏覽器偏好中文) ->/zh-CN/home= 中文/home-> 重定向 (瀏覽器偏好英文) ->/en/home= 英文
這時我們需要定義一個 store，這里使用 Pinia store，Vuex 同理。
import { usePreferredLanguages, useStorage } from '@vueuse/core';
import { defineStore } from 'pinia';
export const useLangStore = defineStore('lang', {
state: () => {
const savedLang = useStorage<string | null>('lang', null, undefined);
const systemLang = usePreferredLanguages();
return { savedLang, systemLang };
},
getters: {
lang: (state) => {
const lang = state.savedLang || state.systemLang[0];
if (lang.startsWith('zh')) {
return 'zh-CN';
} else {
return 'en';
}
},
},
actions: {
setLang(l?: string) {
if (!l) {
this.savedLang = null;
} else {
this.savedLang = l;
}
},
}
});這段代碼使用了 VueUse 中的 usePreferredLanguages 來獲得用戶偏好的瀏覽器語言，并用 useStorage 添加了一個 LocalStorage 中的存儲項。
邏輯是：如果用戶手動設定了語言（savedLang），則使用之；如果沒有，則使用系統(tǒng)偏好的第一個語言。這樣，我們只要取 lang 的值就可以得到最終的偏好語言是中文還是英文。
然后，我們需要定義一個路徑守衛(wèi)，以自動處理 URL 中沒有語言的情況。
import { createRouter as _createRouter, type RouteLocationNormalized } from 'vue-i18n-routing';
import { createWebHistory } from 'vue-router';
import HomeView from '@/views/HomeView.vue';
const locales = [
{
code: 'en',
iso: 'en-US',
name: 'English',
},
{
code: 'zh-CN',
iso: 'zh-CN',
name: '中文',
},
{
code: '',
iso: '',
name: '',
}
];
export function createRouter(i18n: any) {
const router = _createRouter(i18n, {
version: 4,
locales: locales,
history: createWebHistory(import.meta.env.BASE_URL),
routes: [
{
path: '/home',
name: 'home',
component: HomeView,
},
],
});
router.beforeEach((to: RouteLocationNormalized, from: RouteLocationNormalized) => {
const lang = useLangStore();
const pathLocale = to.path.split('/')[1];
if ((!pathLocale) || (!locales.some(locale => locale.code === pathLocale))) {
return `/${lang.lang}${to.path}`;
}
});
return router;
}這里需要注意三點：
- 我們增加了一個新的空
locales，這樣請求才能到達router.beforeEach。 - 我們去掉了
defaultLocale。 - 使用剛才定義的 store：
useLangStore()這行代碼必須放在router.beforeEach中，而不能放在模塊頂端，因為加載模塊時 Pinia 還沒有啟動。
這樣，就實現(xiàn)了無語言路徑自動跳轉到當前偏好語言路徑。
5. 導航欄切換按鈕
然后，可以在導航欄增加一個按鈕，來手動切換語言，例如：
<script setup lang="ts">
import { useLocalePath, useSwitchLocalePath } from 'vue-i18n-routing';
import { useLangStore } from '@/stores/lang';
const lang = useLangStore();
const { t, locale } = useI18n({ inheritLocale: true, useScope: 'local' });
</script>
<template>
<div
@click="
lang.setLang('en');
router.push(switchLocalePath('en'));
menuShown = '';
"
class="py-2 px-2 gap-2 flex items-center cursor-pointer hover:bg-slate-400/10"
:class="{ 'text-sky-300': locale == 'en' }"
role="option"
tabindex="-1"
:aria-selected="locale == 'en'"
>
<IconEnglish class="w-5 h-5 text-slate-400 dark:text-slate-200" />
English
</div>
<div
@click="
lang.setLang('zh-CN');
router.push(switchLocalePath('zh-CN'));
menuShown = '';
"
class="py-2 px-2 gap-2 flex items-center cursor-pointer hover:bg-slate-400/10"
:class="{ 'text-sky-300': locale == 'zh-CN' }"
role="option"
tabindex="-1"
:aria-selected="locale == 'zh-CN'"
>
<IconChinese class="w-5 h-5 text-slate-400 dark:text-slate-200" />
中文
</div>
</template>這里，我們在剛才定義的 store 中存儲當前手動設定的語言，同時使用 switchLocalePath 來實現(xiàn)路徑和語言的切換。
6. SEO 和 Head Meta
同一內容的不同語言版本應該在 head 中進行標注，并指向所有其他替代頁面（參見 Google SEO）。這里我們可以在 App.vue 中用 useLocaleHead 和來自 @unhead/vue 包的 useHead 進行設置：
import { useLocaleHead } from 'vue-i18n-routing';
import { useHead } from '@unhead/vue';
const i18nHead = useLocaleHead({ addSeoAttributes: true, defaultLocale: null, strategy: null });
onMounted(() => {
useHead({
htmlAttrs: computed(() => ({
lang: i18nHead.value.htmlAttrs!.lang,
})),
link: computed(() => [...(i18nHead.value.link || [])]),
meta: computed(() => [...(i18nHead.value.meta || [])]),
});
});這樣就基本實現(xiàn)了一個多語言的國際化站點?？赡茉谶M行前端翻譯的同時，后端也需要進行翻譯，請期待下一期：Python Flask 后端如何接入 i18n 實現(xiàn)國際化多語言！
7. 案例分析
案例：GithubStar.Pro 的前端界面國際化多語言，是使用本文所述的方法實現(xiàn)的，各位可以看看效果。
也歡迎各位使用 GithubStar.Pro 互贊平臺，提高您的開源項目知名度，收獲更多用戶。
到此這篇關于Vue3 如何接入 i18n 實現(xiàn)國際化多語言的文章就介紹到這了,更多相關Vue3 國際化多語言內容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關文章希望大家以后多多支持腳本之家！
相關文章
這篇文章主要介紹了Vue之創(chuàng)建項目及目錄方式,具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教2023-11-11
本文主要介紹了el-table嵌套el-popover處理卡頓的解決，文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值，需要的朋友們下面隨著小編來一起學習學習吧2022-05-05
下面小編就為大家?guī)硪黄赩ue過渡狀態(tài)實例講解。小編覺得挺不錯的，現(xiàn)在就分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2017-09-09
Vue ElementUI實現(xiàn):限制輸入框只能輸入正整數的問題
這篇文章主要介紹了Vue ElementUI實現(xiàn):限制輸入框只能輸入正整數的問題，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2020-07-07
這篇文章主要介紹了vue中多個有順序要求的異步操作處理，文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值，需要的朋友們下面隨著小編來一起學習學習吧2019-10-10
這篇文章主要介紹了vue.js功能介紹 - 指令，組件詳細介紹及實例，詳細的介紹了指令和組件的用法，有興趣的可以了解一下。2017-04-04
在我們使用vue的開發(fā)過程中總會遇到這樣的場景,封裝自己的業(yè)務組件,下面這篇文章主要給大家介紹了關于vue3封裝Notification組件的完整步驟,本文通過示例代碼介紹的非常詳細,需要的朋友可以參考下2022-03-03
Vue 防止短時間內連續(xù)點擊后多次觸發(fā)請求的操作
這篇文章主要介紹了Vue 防止短時間內連續(xù)點擊后多次觸發(fā)請求的操作，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2020-11-11
這篇文章主要介紹了vue 公共列表選擇組件,引用Vant-UI的樣式方式，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2020-11-11
本篇文章主要介紹了用Vue-cli搭建的項目中引入css報錯的原因分析，具有一定的參考價值，感興趣的小伙伴們可以參考一下2017-07-07