vue3 項目配置多語言支持,如何從服務端拿多語言配置

在 Vue3 項目中實現多語言支持并從服務端獲取配置,可以使用 Vue I18n 庫。在初始化階段可以發送請求獲取多語言配置或者通過本地文件加載json文件的方式,都可以實現。我這里是tauri項目,所以使用的是invoke從tauri端拿到配置文件,然后根據配置文件獲取多語言配置。

Vue3 項目配置多語言支持(從服務端獲取配置)

在 Vue3 項目中實現多語言支持并從服務端獲取配置,可以使用 Vue I18n 庫。以下是完整的實現方案:

1. 安裝依賴

首先安裝 vue-i18n:

npm install vue-i18n@next

2. 基礎配置

創建 i18n 實例

// src/i18n.js
import { createI18n } from 'vue-i18n'const i18n = createI18n({legacy: false, // 使用 Composition API 模式locale: 'en', // 默認語言fallbackLocale: 'en', // 回退語言messages: {}, // 初始為空,從服務端加載silentTranslationWarn: true // 禁止警告
})export default i18n

在 main.js 中引入

import { createApp } from 'vue'
import App from './App.vue'
import i18n from './i18n'const app = createApp(App)
app.use(i18n)
app.mount('#app')

3. 從服務端獲取語言配置

創建 API 服務

// src/api/i18n.js
import axios from 'axios'export async function fetchTranslations(lang) {try {const response = await axios.get(`/api/translations/${lang}`)return response.data} catch (error) {console.error('Error fetching translations:', error)return {}}
}

動態加載語言

// src/utils/i18n-loader.js
import { fetchTranslations } from '@/api/i18n'export async function loadLanguageAsync(i18n, lang) {if (i18n.global.locale.value === lang) {return Promise.resolve()}// 如果已經加載過該語言,直接設置if (i18n.global.availableLocales.includes(lang)) {i18n.global.locale.value = langreturn Promise.resolve()}// 從服務器獲取翻譯const messages = await fetchTranslations(lang)// 設置語言i18n.global.setLocaleMessage(lang, messages)i18n.global.locale.value = lang// 可以在這里保存語言偏好到本地存儲localStorage.setItem('userLanguage', lang)return Promise.resolve()
}

4. 在應用中使用

語言切換組件示例

<template><div><select v-model="currentLocale" @change="changeLanguage"><option value="en">English</option><option value="zh">中文</option><option value="es">Espa?ol</option></select></div>
</template><script setup>
import { ref, watch } from 'vue'
import { useI18n } from 'vue-i18n'
import { loadLanguageAsync } from '@/utils/i18n-loader'const { locale } = useI18n()
const currentLocale = ref(locale.value)// 初始化時加載用戶偏好語言
const initLanguage = async () => {const savedLanguage = localStorage.getItem('userLanguage') || navigator.language.slice(0, 2)await loadLanguageAsync(i18n, savedLanguage)currentLocale.value = savedLanguage
}initLanguage()const changeLanguage = async () => {await loadLanguageAsync(i18n, currentLocale.value)
}
</script>

在組件中使用翻譯

<template><div><h1>{{ t('welcome') }}</h1><p>{{ t('greeting', { name: 'John' }) }}</p></div>
</template><script setup>
import { useI18n } from 'vue-i18n'const { t } = useI18n()
</script>

5. 服務端 API 設計

服務端應該提供一個端點返回指定語言的翻譯,例如:

GET /api/translations/:lang

響應格式示例:

{"welcome": "Welcome","greeting": "Hello, {name}!","buttons": {"submit": "Submit","cancel": "Cancel"}
}

6. 高級優化

緩存策略

// 修改 i18n-loader.js
const translationCache = new Map()export async function loadLanguageAsync(i18n, lang) {// ... 前面的代碼// 檢查緩存if (translationCache.has(lang)) {i18n.global.setLocaleMessage(lang, translationCache.get(lang))i18n.global.locale.value = langreturn Promise.resolve()}// 從服務器獲取const messages = await fetchTranslations(lang)translationCache.set(lang, messages)// ... 后面的代碼
}

加載狀態

// 添加加載狀態管理
const loadingLanguages = new Set()export async function loadLanguageAsync(i18n, lang) {if (loadingLanguages.has(lang)) {return}loadingLanguages.add(lang)try {// ... 加載邏輯} finally {loadingLanguages.delete(lang)}
}

錯誤處理

export async function loadLanguageAsync(i18n, lang) {try {// ... 加載邏輯} catch (error) {console.error(`Failed to load language ${lang}:`, error)// 回退到默認語言if (lang !== i18n.global.fallbackLocale.value) {i18n.global.locale.value = i18n.global.fallbackLocale.value}throw error}
}

7. TypeScript 支持 (可選)

為翻譯鍵添加類型支持:

// src/i18n.d.ts
declare module 'vue-i18n' {export interface DefineLocaleMessage {welcome: stringgreeting: stringbuttons: {submit: stringcancel: string}// 添加更多翻譯鍵...}
}

這樣在組件中使用?t()?函數時會有類型提示和檢查。

通過以上步驟,你的 Vue3 應用就可以從服務端動態加載多語言配置,并支持語言切換功能了。

本文來自互聯網用戶投稿,該文觀點僅代表作者本人,不代表本站立場。本站僅提供信息存儲空間服務,不擁有所有權,不承擔相關法律責任。
如若轉載,請注明出處:http://www.pswp.cn/news/907568.shtml
繁體地址,請注明出處:http://hk.pswp.cn/news/907568.shtml
英文地址,請注明出處:http://en.pswp.cn/news/907568.shtml

如若內容造成侵權/違法違規/事實不符,請聯系多彩編程網進行投訴反饋email:809451989@qq.com,一經查實,立即刪除!

相關文章

使用ssh-audit掃描ssh過期加密算法配置

使用ssh-audit掃描ssh過期加密算法配置 安裝檢查ssh的加密算法配置修改ssh的加密算法配置 安裝 # pip3安裝ssh-audit pip3 instal ssh-audit檢查ssh的加密算法配置 # 檢查ssh的配置 ssh-audit 192.168.50.149修改ssh的加密算法配置 # 查看ssh加密配置文件是否存在 ls /etc/c…

LeetCode 高頻 SQL 50 題(基礎版)之 【連接】部分 · 下

前五道題&#xff1a;LeetCode 高頻 SQL 50 題&#xff08;基礎版&#xff09;之 【連接】部分 上 題目&#xff1a;577. 員工獎金 題解&#xff1a; select r.name,b.bonus from Employee r left join Bonus b on r.empIdb.empId where b.bonus <1000 or b.bonus is nul…

[yolov11改進系列]基于yolov11引入感受野注意力卷積RFAConv的python源碼+訓練源碼

[RFAConv介紹] 1、RFAConv 在傳統卷積操作中&#xff0c;每個感受野都使用相同的卷積核參數&#xff0c;無法區分不同位置的信息差異&#xff0c;這都限制了網絡性能。此外&#xff0c;由于空間注意力以及現有空間注意力機制的局限性&#xff0c;雖然能夠突出關鍵特征&#xf…

【軟件設計】通過軟件設計提高 Flash 的擦寫次數

目錄 0. 個人簡介 && 授權須知1. Flash 和 EEROM 基本情況2. 場景要求3. 軟件設計思路4. 代碼展示4.1 flash.h4.2 flash.c 0. 個人簡介 && 授權須知 &#x1f4cb; 個人簡介 &#x1f496; 作者簡介&#xff1a;大家好&#xff0c;我是喜歡記錄零碎知識點的菜鳥…

OpenCV CUDA模塊直方圖計算------在 GPU 上計算輸入圖像的直方圖(histogram)函數histEven()

操作系統&#xff1a;ubuntu22.04 OpenCV版本&#xff1a;OpenCV4.9 IDE:Visual Studio Code 編程語言&#xff1a;C11 算法描述 該函數用于在 GPU 上計算輸入圖像的直方圖&#xff08;histogram&#xff09;。它將像素值區間均勻劃分為若干個 bin&#xff08;桶&#xff09;…

龍虎榜——20250530

上證指數陽包陰&#xff0c;量能較前期下跌有放大&#xff0c;但個股跌多漲少&#xff0c;下跌超過4000個。 深證指數和上漲總體相同。 2025年5月30日龍虎榜行業方向分析 1. 醫藥&#xff08;創新藥原料藥&#xff09; 代表標的&#xff1a;華納藥廠、舒泰神、睿智醫藥、華…

HarmonyNext使用request.agent.download實現斷點下載

filedownlaod(API12) &#x1f4da;簡介 filedownload 這是一款支持大文件斷點下載的開源插件&#xff0c;退出應用程序進程殺掉以后或無網絡情況下恢復網絡后&#xff0c;可以在上次位置繼續恢復下載等 版本更新—請查看更新日志!!! 修復已知bug,demo已經更新 &#x1f4d…

nginx: [emerg] bind() to 0.0.0.0:80 failed (10013: 80端口被占用

Nginx啟動報錯&#xff1a;nginx: [emerg] bind() to 0.0.0.0:80 failed (10013: An attempt was made to access a socket in a way forbidden by its access permissions) 這個報錯代表80端口被占用 先查看占用80的端口 netstat -aon | findstr :80 把它殺掉&#xff0c;強…

embbeding 視頻截圖

Embedding是什么&#xff1f;有什么作用&#xff1f;是怎么得到的&#xff1f;_嗶哩嗶哩_bilibili

服務器tty2終端如何關機

在服務器的 tty2 或其他虛擬終端上&#xff0c;要安全地進行關機操作&#xff0c;可以使用以下命令之一&#xff1a; 1.1 使用 shutdown 命令&#xff1a; shutdown 命令可以計劃系統關機。默認需要超級用戶權限。 sudo shutdown -h now-h 選項表示關機&#xff08;halt&…

時序數據庫IoTDB啟動方式及集群遷移指南

IoTDB啟動方式 IoTDB在配置啟動時有兩種推薦方式&#xff1a; ?主機名啟動?&#xff1a; ?推薦理由?&#xff1a;主機名啟動方式更為靈活&#xff0c;便于在不同網絡環境中部署相同的IoTDB實例。?工作原理?&#xff1a;IoTDB啟動后會維護一張節點編號與網絡地址的映射表…

如何在Qt中繪制一個帶有動畫的弧形進度條?

如何在Qt中繪制一個弧形的進度條 在圖形用戶界面開發中&#xff0c;進度指示控件&#xff08;Progress Widget&#xff09;是非常常見且實用的組件。CCArcProgressWidget 是一個繼承自 QWidget 的自定義控件&#xff0c;用于繪制圓弧形進度條。當然&#xff0c;筆者看了眼公開…

在 Mac 下 VSCode 中的終端使用 option + b 或 f 的快捷鍵變成輸入特殊字符的解決方案

前言 在終端里&#xff0c;我們可以使用 option b 和 option f 來在我們輸入的命令中進行快速的前后調整光標&#xff0c;但是&#xff0c;在未設置的情況下&#xff0c;在 MacOS 中&#xff0c;會變成輸入特殊字符。 普通鍵盤上是 alt b 和 alt f &#xff0c;只是叫法不…

Android bindservice綁定服務,并同步返回service對象的兩個方法

先上一段代碼&#xff1a; private IDeviceService deviceService null; private ServiceConnection connnull; private synchronized void bindyourservice() { Intent intent new Intent();intent.setPackage("servicepackagename");intent.setAction("…

Go語言之空接口與類型斷言

Go 語言中&#xff0c;接口是一種強大的抽象機制。其中&#xff0c;空接口&#xff08;interface{}&#xff09;和類型斷言為我們提供了處理任意類型與類型檢查的能力。 一、空接口&#xff08;interface{}&#xff09; 空接口是 Go 中最特殊的接口&#xff1a;不包含任何方法…

三、OrcaSlicer預設顯示

一、界面類 主框架使用的是wxWidgets庫&#xff1b;3D模型的渲染區的控件&#xff0c;使用的是imgui庫。 1、Plater 此類在OrcaSlicer\src\slic3r\GUI\Plater.hpp文件中定義 1.1 Plater::priv 此結構體是Plater的數據類&#xff0c;各種數據的對象和指針保存在此結構體中。如…

00 QEMU源碼中文注釋與架構講解

QEMU源碼中文注釋與架構講解 先占坑&#xff1a;等后續完善后再更新此文章 注釋作者將狼才鯨創建日期2025-05-30更新日期NULL CSDN閱讀地址&#xff1a;00 QEMU源碼中文注釋與架構講解Gitee源碼倉庫地址&#xff1a;才鯨嵌入式/qemu 一、前言 參考網址 QEMU 源碼目錄簡介qe…

一、Sqoop歷史發展及原理

作者&#xff1a;IvanCodes 日期&#xff1a;2025年5月30日 專欄&#xff1a;Sqoop教程 在大數據時代&#xff0c;數據往往分散存儲在各種不同類型的系統中。其中&#xff0c;傳統的關系型數據庫 (RDBMS) 如 MySQL, Oracle, PostgreSQL 等&#xff0c;仍然承載著大量的關鍵業務…

【Halcon】圖像分割中的 regiongrowing 與dyn_threshold 動態閾值 算法詳解對比

圖像分割中的 regiongrowing 與動態閾值算法詳解對比 在使用 HALCON 進行圖像處理時&#xff0c;圖像分割是最常見也最關鍵的操作之一。本文將深入講解 regiongrowing 算子的原理與使用方法&#xff0c;并與另一常見方法——動態閾值 (dyn_threshold) 進行詳細對比&#xff0c…

Docker部署項目無法訪問,登錄超時完整排查攻略

項目背景&#xff1a;遷移前后端應用&#xff0c;prod環境要求保留443端口&#xff0c;開發環境37800端口&#xff0c;后端容器端口為8000&#xff0c;前端為80&#xff0c;fastAPI對外端口為41000 生產環境部署在VM01,開發環境部署在VM03&#xff0c;在VM01配置nginx轉發 [r…