Vue3 如何接入 i18n 實現國際化多語言

来源:https://www.cnblogs.com/techhub/p/18290763/vue3-i18n
-Advertisement-
Play Games

‍ 寫在開頭 點贊 + 收藏 學會 理解 forEach JavaScript 的forEach方法是一種流行的數組迭代工具。它為每個數組元素執行一次提供的函數。但是,與傳統的for 和 while迴圈不同,forEach它被設計為對每個元素執行該函數,沒有內置機制來提前停止或中 ...


1. 基本方法

在 Vue.js 3 中實現網頁的國際化多語言,最常用的包是 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 站點的爬取機制如下:

  1. 類似 Vue 站點的 JS 動態頁面是可以被爬取的,不影響權重 (參見 Google SEO)。
  2. 與用戶首選語言匹配的頁面將優先展示 (參見 Google SEO)。

2. 基礎實現

第一步,安裝一個 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),則使用之;如果沒有,則使用系統偏好的第一個語言。這樣,我們只要取 lang 的值就可以得到最終的偏好語言是中文還是英文。

然後,我們需要定義一個路徑守衛,以自動處理 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;
}

這裡需要註意三點:

  1. 我們增加了一個新的空 locales,這樣請求才能到達 router.beforeEach
  2. 我們去掉了 defaultLocale
  3. 使用剛纔定義的 store:useLangStore() 這行代碼必須放在 router.beforeEach 中,而不能放在模塊頂端,因為載入模塊時 Pinia 還沒有啟動。

這樣,就實現了無語言路徑自動跳轉到當前偏好語言路徑。

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 來實現路徑和語言的切換。

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 || [])]),
  });
});

這樣就基本實現了一個多語言的國際化站點。可能在進行前端翻譯的同時,後端也需要進行翻譯,請期待下一期:Python Flask 後端如何接入 i18n 實現國際化多語言!

6. 案例分析

案例:GithubStar.Pro 的前端界面國際化多語言,是使用本文所述的方法實現的,各位可以看看效果。

也歡迎各位使用 GithubStar.Pro 互贊平臺,提高您的開源項目知名度,收穫更多用戶。


您的分享是我們最大的動力!

-Advertisement-
Play Games
更多相關文章
  • UIImage 和 UIImageView 是 iOS 開發中常用的兩個類,分別用於表示圖像數據和顯示圖像。 UIImage UIImage 是一個表示圖像數據的類,可以從文件、數據、圖像資源庫等載入圖像。UIImage 支持多種圖像格式,包括 PNG、JPEG、GIF 等。 創建 UIImage ...
  • UIButton用於創建可交互的按鈕。按鈕可以響應用戶的觸摸事件,執行特定的動作或邏輯。 創建和配置UIButton 創建UIButton的基本步驟: // 創建UIButton實例,指定按鈕類型為系統類型 UIButton *button = [UIButton buttonWithType:UI ...
  • 在Objective-C進行iOS開發中,UILabel是一個非常基礎且常用的UI組件,用於在應用界面上顯示一段靜態文本。UILabel屬於UIKit框架的一部分,提供了豐富的屬性來控制文本的顯示方式,包括文本內容、字體、顏色、對齊方式、行數等。 創建和配置UILabel 創建一個UILabel實例 ...
  • 在iOS開發中,UITableView和UICollectionView是兩個非常核心的用於展示集合數據的UI組件。它們都能以列表的形式展示數據,但各自的特點和使用場景有所不同。 UITableView UITableView用於展示和管理垂直滾動的單列數據列表。它是以行的形式展示數據,每行(cel ...
  • 咱們國內現在手機分為兩類,Android手機與蘋果手機,現在用的各類APP,為了手機的使用安全,避免下載到病毒軟體,官方都極力推薦使用手機自帶的應用商城進行下載,但是國內Android手機品類眾多,手機商城各式各樣,做不到統一,所以Android的APP上架得一個一個平臺去申請上架,一直讓開發人員頭... ...
  • UINavigationController 是 iOS 中用於管理視圖控制器層次結構的一個重要組件,通常用於實現基於堆棧的導航。它提供了一種用戶界面,允許用戶在視圖控制器之間進行層次化的導航,例如從列表視圖到詳細視圖。 UINavigationController 的主要功能 管理視圖控制器堆棧: ...
  • UITabBarController 是 iOS 中用於管理和顯示選項卡界面的一個視圖控制器。它允許用戶在多個視圖控制器之間進行切換,每個視圖控制器對應一個選項卡。 主要功能 管理多個視圖控制器: UITabBarController 管理一個視圖控制器數組,每個視圖控制器對應一個選項卡。 顯示選項 ...
  • 在MVC模型中,V指view,負責用戶界面的顯示、處理用戶輸入,並將輸入傳遞給控制器。C是指ViewController,充當模型和視圖之間的中介。控制器接收用戶輸入,處理用戶請求,並將結果傳遞給視圖以更新顯示。本文詳細介紹在iOS開發中UIView與UIViewController的生命周期。 U ...
一周排行
    -Advertisement-
    Play Games
  • 通過WPF的按鈕、文本輸入框實現了一個簡單的SpinBox數字輸入用戶組件並可以通過數據綁定數值和步長。本文中介紹了通過Xaml代碼實現自定義組件的佈局,依賴屬性的定義和使用等知識點。 ...
  • 以前,我看到一個朋友在對一個系統做初始化的時候,通過一組魔幻般的按鍵,調出來一個隱藏的系統設置界面,這個界面在常規的菜單或者工具欄是看不到的,因為它是一個後臺設置的關鍵界面,不公開,同時避免常規用戶的誤操作,它是作為一個超級管理員的入口功能,這個是很不錯的思路。其實Winform做這樣的處理也是很容... ...
  • 一:背景 1. 講故事 前些天有位朋友找到我,說他的程式每次關閉時就會自動崩潰,一直找不到原因讓我幫忙看一下怎麼回事,這位朋友應該是第二次找我了,分析了下 dump 還是挺經典的,拿出來給大家分享一下吧。 二:WinDbg 分析 1. 為什麼會崩潰 找崩潰原因比較簡單,用 !analyze -v 命 ...
  • 在一些報表模塊中,需要我們根據用戶操作的名稱,來動態根據人員姓名,更新報表的簽名圖片,也就是電子手寫簽名效果,本篇隨筆介紹一下使用FastReport報表動態更新人員簽名圖片。 ...
  • 最新內容優先發佈於個人博客:小虎技術分享站,隨後逐步搬運到博客園。 創作不易,如果覺得有用請在Github上為博主點亮一顆小星星吧! 博主開始學習編程於11年前,年少時還只會使用cin 和cout ,給單片機點點燈。那時候,類似async/await 和future/promise 模型的認知還不是 ...
  • 之前在阿裡雲ECS 99元/年的活動實例上搭建了一個測試用的MINIO服務,以前都是直接當基礎設施來使用的,這次準備自己學一下S3相容API相關的對象存儲開發,因此有了這個小工具。目前僅包含上傳功能,後續計劃開發一個類似圖床的對象存儲應用。 ...
  • 目錄簡介快速入門安裝 NuGet 包實體類User資料庫類DbFactory增刪改查InsertSelectUpdateDelete總結 簡介 NPoco 是 PetaPoco 的一個分支,具有一些額外的功能,截至現在 github 星數 839。NPoco 中文資料沒多少,我是被博客園群友推薦的, ...
  • 前言 前面使用 Admin.Core 的代碼生成器生成了通用代碼生成器的基礎模塊 分組,模板,項目,項目模型,項目欄位的基礎功能,本篇繼續完善,實現最核心的模板生成功能,並提供生成預覽及代碼文件壓縮下載 準備 首先清楚幾個模塊的關係,如何使用,簡單畫一個流程圖 前面完成了基礎的模板組,模板管理,項目 ...
  • 假設需要實現一個圖標和文本結合的按鈕 ,普通做法是 直接重寫該按鈕的模板; 如果想作為通用的呢? 兩種做法: 附加屬性 自定義控制項 推薦使用附加屬性的形式 第一種:附加屬性 創建Button的附加屬性 ButtonExtensions 1 public static class ButtonExte ...
  • 在C#中,委托是一種引用類型的數據類型,允許我們封裝方法的引用。通過使用委托,我們可以將方法作為參數傳遞給其他方法,或者將多個方法組合在一起,從而實現更靈活的編程模式。委托類似於函數指針,但提供了類型安全和垃圾回收等現代語言特性。 基本概念 定義委托 定義委托需要指定它所代表的方法的原型,包括返回類 ...