uniapp 多语言实现方案分享

在uniapp中实现多语言功能有哪些成熟的方案？希望能分享具体的实现步骤、推荐的插件或工具，以及实际开发中可能遇到的坑和解决方案。比如如何处理动态切换语言、如何管理语言包文件等问题。

2 回复

推荐使用 uni-app 官方多语言方案：

  1. 在 locale 目录创建语言文件（如 zh-CN.json、en.json）。
  2. 使用 uni.getLocale() 和 uni.setLocale() 管理语言切换。
  3. 页面中通过 $t('key') 调用文本。
  4. 搭配 vue-i18n 更强大，支持动态加载和复数处理。
    注意提前规划词条结构，避免后期维护混乱。

UniApp 多语言实现方案可通过以下步骤完成，核心是 vue-i18n 库结合 UniApp 的动态语言切换能力：

1. 安装依赖

npm install vue-i18n

2. 创建语言资源文件

在项目根目录创建 locale 文件夹，添加语言 JSON 文件：

  • zh-CN.json（中文）
  • en-US.json（英文）

示例内容：

// zh-CN.json
{
  "hello": "你好",
  "welcome": "欢迎使用 UniApp"
}

// en-US.json
{
  "hello": "Hello",
  "welcome": "Welcome to UniApp"
}

3. 配置 i18n 实例

在 main.js 中初始化：

import { createApp } from 'vue'
import App from './App.vue'
import { createI18n } from 'vue-i18n'

// 加载语言文件
const messages = {
  'zh-CN': require('@/locale/zh-CN.json'),
  'en-US': require('@/locale/en-US.json')
}

const i18n = createI18n({
  locale: uni.getLocale?.() || 'zh-CN', // 获取系统语言
  fallbackLocale: 'en-US',
  messages
})

createApp(App).use(i18n).mount('#app')

4. 在页面中使用

<template>
  <view>
    <text>{{ $t('hello') }}</text>
    <button @click="switchLang">切换语言</button>
  </view>
</template>

<script>
export default {
  methods: {
    switchLang() {
      const lang = this.$i18n.locale === 'zh-CN' ? 'en-US' : 'zh-CN'
      this.$i18n.locale = lang
      uni.setLocale(lang) // 同步 UniApp 框架语言
    }
  }
}
</script>

5. 进阶功能

  • 持久化存储：使用 uni.setStorageSync('lang', lang) 保存用户选择
  • 动态加载：通过 HTTP 请求异步加载语言包
  • 复数处理：通过 $tc('key', count) 实现复数形式

注意事项

  1. 语言键名需保持一致
  2. 页面刷新后需从存储中恢复语言设置
  3. 小程序端需在 pages.json 中配置语言依赖

此方案兼容 H5/小程序/App，通过 20 行核心代码即可实现多语言切换。

回到顶部