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

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

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

項(xiàng)目結(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                  # 主入口文件

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

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

二、代碼講解

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

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

zh-CN.json（簡體中文）

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

en-US.json（英語）

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

這里的鍵（key）相當(dāng)于一個(gè)統(tǒng)一的標(biāo)識(shí)，值（value）是對(duì)應(yīng)語言的翻譯內(nèi)容。不同語言文件中相同的鍵，對(duì)應(yīng)不同的翻譯值，從而實(shí)現(xiàn)通過同一個(gè)鍵在不同語言環(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']

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

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

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

函數(shù)詳解

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

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

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

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

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

4. App.vue 中的使用邏輯

在 App.vue 的 JavaScript 部分，通常會(huì)進(jìn)行語言的初始化判斷：首次啟動(dòng)應(yīng)用時(shí)，若本地存儲(chǔ)中沒有user_lang（即用戶未選擇過語言），則跳轉(zhuǎn)至語言選擇界面；若存在，則直接使用該語言設(shè)置當(dāng)前語言。

這樣，當(dāng)應(yīng)用重新啟動(dòng)時(shí)，會(huì)從本地存儲(chǔ)中讀取用戶之前選擇的語言，保證語言設(shè)置的連貫性。

到此這篇關(guān)于Vue3+Uniapp實(shí)現(xiàn)環(huán)境多語言方案完整介紹的文章就介紹到這了,更多相關(guān)Vue3環(huán)境多語言內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

最新評(píng)論