Vue3 uni-app 多语言实现方案

Question

本文介绍了在 Vue3 和 uni-app 环境中实现多语言功能的完整方案。核心思路是将翻译内容存储在 JSON 文件中，根据用户选择的语言动态切换显示，从而支持国际化。

基础设计

多语言实现的核心是通过键值对替换页面中的文本内容。默认根据系统语言加载对应语言包，用户手动切换时更新语言包。

项目结构示例：

├── src
│   ├── locales
│   │   ├── en-US.json
│   │   ├── zh-CN.json
│   │   └── index.js
│   ├── composables
│   │   └── useI18n.js
│   ├── pages
│   └── main.js

代码实现

1. 准备语言资源

创建 JSON 文件存储翻译内容，例如：

zh-CN.json（简体中文）

{
    "title": "这是中文",
    "hello": "欢迎"
}

en-US.json（英语）

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

键（key）作为统一标识，在不同语言文件中对应不同的翻译值。

2. 语言加载器（locales/index.js）

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

export const getSystemLanguage = () => {
  const systemLang = uni.getSystemInfoSync().language
  return Object.keys(messages).includes(systemLang) 
    ? systemLang 
    : 'en-US'
}

export const getMessages = (lang) => messages[lang] || messages['en-US']

getSystemLanguage 函数获取系统语言，如果支持则返回，否则默认返回英语。
getMessages 函数根据语言参数返回对应的语言包。

3. 国际化组合函数（composables/useI18n.js）

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

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]
    }
    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)
  }

  const language = computed(() => currentLang.value)

  return { t, setLanguage, language }
}

currentLang 使用 ref 创建响应式语言状态，优先从本地存储获取用户选择，否则使用系统语言。
t 函数是核心翻译函数，支持嵌套键和参数替换。例如，对于键 common.title，它会从语言包中逐层查找；对于文本 "欢迎{name}!"，参数 {name: '张三'} 会替换为 "欢迎张三!"。
setLanguage 函数切换语言并保存到本地存储。
language 通过 computed 提供当前语言的响应式引用。

4. 在 App.vue 中的使用

在应用入口中，通常进行语言初始化：检查本地存储中是否有用户选择的语言，如果没有则引导用户选择，否则直接设置。这样确保应用重启后语言设置保持一致。

此方案通过组合函数和语言包管理，在 Vue3 和 uni-app 中实现了灵活的多语言支持，适用于需要国际化的移动应用和网页项目。