Vue3+Uniapp實現(xiàn)環(huán)境多語言方案完整介紹

更新時間：2025年08月12日 08:58:05 作者：碎花里

本文主要介紹了Vue3 Uniapp環(huán)境下的多語言實現(xiàn)方案,核心思路是通過人為翻譯后將內(nèi)容存儲在 JSON 文件中,當(dāng)用戶選擇語言時調(diào)用對應(yīng)文件實現(xiàn)多語言切換,需要的小伙伴可以了解下

Vue3+Uniapp 環(huán)境多語言實現(xiàn)方案

本質(zhì)上是通過人為翻譯后將內(nèi)容存儲在 JSON 文件中，當(dāng)用戶選擇語言時調(diào)用對應(yīng)文件實現(xiàn)多語言切換。

一、基礎(chǔ)設(shè)計

項目結(jié)構(gòu)

├── src
│ ├── locales # 多語言資源目錄
│ │ ├── en-US.json # 英語
│ │ ├── zh-CN.json # 簡體中文
│ │ └── index.js # 語言加載器
│ ├── composables
│ │ └── useI18n.js # 國際化組合函數(shù)
│ ├── pages
│ │ └── [...].vue # 頁面組件
│ ├── App.vue # 應(yīng)用入口
│ └── main.js # 主入口文件

多語言實現(xiàn)的核心思路是：將頁面中所有需要展示的文字內(nèi)容，通過對應(yīng)語言的鍵值對進行替換。默認(rèn)情況下，根據(jù)用戶系統(tǒng)自帶語言加載對應(yīng)的語言包；當(dāng)用戶手動選擇其他語言時，切換到相應(yīng)的語言包，從而實現(xiàn)頁面文字的翻譯效果。

例如，在頁面中通過調(diào)用翻譯函數(shù)，使用統(tǒng)一的鍵來獲取不同語言的對應(yīng)值，如下所示的代碼邏輯：

二、代碼講解

1. 準(zhǔn)備語言資源

將需要翻譯的內(nèi)容以鍵值對形式存儲在對應(yīng)的語言文件中，鍵名可自定義，只要便于理解和使用即可。

zh-CN.json（簡體中文）

{
	"title": "這是中文",
	"hello": "歡迎"
}

en-US.json（英語）

{
	"title": "this is english",
	"hello": "welcome"
}

這里的鍵（key）相當(dāng)于一個統(tǒng)一的標(biāo)識，值（value）是對應(yīng)語言的翻譯內(nèi)容。不同語言文件中相同的鍵，對應(yīng)不同的翻譯值，從而實現(xiàn)通過同一個鍵在不同語言環(huán)境下獲取不同文本的效果。

2. 語言加載器（locales/index.js）

const messages = {
  'zh-CN': require('./zh-CN.json'),
  'en-US': require('./en-US.json')
}

// 獲取系統(tǒng)語言
export const getSystemLanguage = () => {
  const systemLang = uni.getSystemInfoSync().language
  return Object.keys(messages).includes(systemLang) 
    ? systemLang 
    : 'en-US'
}

// 獲取當(dāng)前語言包
export const getMessages = (lang) => messages[lang] || messages['en-US']

功能說明：該文件用于加載語言資源，實現(xiàn)根據(jù)系統(tǒng)語言或指定語言獲取對應(yīng)的語言包。
getSystemLanguage 函數(shù)：通過uni.getSystemInfoSync().language獲取用戶系統(tǒng)語言，若系統(tǒng)語言在我們提供的語言包中存在，則返回該語言；否則，默認(rèn)返回英語（'en-US'）。
getMessages 函數(shù)：根據(jù)傳入的語言參數(shù)，返回對應(yīng)的語言包；若該語言包不存在，則默認(rèn)返回英語語言包。

3. 國際化組合函數(shù)（composables/useI18n.js）

import { ref, computed } from 'vue'
import { getMessages, getSystemLanguage } from '@/locales'

// 創(chuàng)建響應(yīng)式語言狀態(tài)
const currentLang = ref(uni.getStorageSync('user_lang') || getSystemLanguage())

export default function useI18n() {
  // 獲取翻譯文本
  const t = (key, params = {}) => {
    const keys = key.split('.')
    let message = getMessages(currentLang.value)
    
    for (const k of keys) {
      if (!message[k]) return key
      message = message[k]
    }
    
    // 處理帶參數(shù)的文本
    return Object.entries(params).reduce((msg, [k, v]) => 
      msg.replace(new RegExp(`{${k}}`, 'g'), v), 
      message
    )
  }

  // 切換語言
  const setLanguage = (lang) => {
    currentLang.value = lang
    uni.setStorageSync('user_lang', lang)
    // 刷新頁面（根據(jù)需求選擇）
    // uni.reLaunch({ url: '/' })
  }

  // 當(dāng)前語言響應(yīng)式引用
  const language = computed(() => currentLang.value)

  return { t, setLanguage, language }
}

在講解該函數(shù)前，先簡單介紹ref和computed：

ref：Vue3 的核心 API，用于將數(shù)據(jù)包裝成響應(yīng)式數(shù)據(jù)。

特點：包裝后的數(shù)據(jù)需通過.value屬性訪問（在 JavaScript 中），在模板中會自動解包，無需使用.value。
適用場景：基本類型的響應(yīng)式數(shù)據(jù)、需要直接訪問和修改的數(shù)據(jù)、需要傳遞給函數(shù)并保持響應(yīng)性的數(shù)據(jù)。

computed：用于創(chuàng)建基于其他響應(yīng)式數(shù)據(jù)計算而來的值，會自動緩存計算結(jié)果，只有當(dāng)依賴項變化時才會重新計算。

函數(shù)詳解

currentLang：通過ref創(chuàng)建響應(yīng)式的當(dāng)前語言狀態(tài)。優(yōu)先從本地存儲（uni.getStorageSync('user_lang')）中獲取用戶之前選擇的語言；若不存在，則通過getSystemLanguage獲取系統(tǒng)語言。

t 函數(shù)（核心翻譯函數(shù)）：根據(jù)傳入的鍵（key）和參數(shù)（params），從當(dāng)前語言包中獲取對應(yīng)的翻譯文本，并處理帶參數(shù)的文本。

const keys = key.split('.')：將傳入的鍵按.分割為數(shù)組，用于處理嵌套結(jié)構(gòu)的語言包。例如，對于鍵common.title，分割后得到['common', 'title']。
let message = getMessages(currentLang.value)：根據(jù)當(dāng)前語言獲取對應(yīng)的語言包。
for (const k of keys)：遍歷分割后的鍵數(shù)組，從語言包中逐層獲取對應(yīng)的翻譯文本。若某個鍵不存在，則返回該鍵本身。
處理帶參數(shù)的文本：通過Object.entries(params).reduce方法，將文本中{參數(shù)名}的占位符替換為實際的參數(shù)值。例如，對于文本"歡迎{name}!"和參數(shù){name: '張三'}，處理后得到"歡迎張三!"。

setLanguage 函數(shù)：用于切換語言。將傳入的語言設(shè)置為當(dāng)前語言（currentLang.value = lang），并將該語言存儲到本地（uni.setStorageSync('user_lang', lang)），以便下次打開應(yīng)用時使用。

language：通過computed創(chuàng)建當(dāng)前語言的響應(yīng)式引用，便于在組件中獲取當(dāng)前語言。