在 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 應用就可以從服務端動態加載多語言配置，并支持語言切換功能了。