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