uniapp 国际化如何实现

如何在 Uniapp 中实现国际化？目前项目需要支持多语言切换，但不太清楚具体该怎么操作。有没有完整的方案或者示例代码可以参考？主要想了解语言包的配置、切换逻辑以及如何与界面绑定显示。

2 回复

uniapp 国际化可通过 vue-i18n 实现。步骤如下：

  1. 安装 vue-i18n 插件
  2. 创建语言包（如 zh-CN、en-US）
  3. 在 main.js 中引入并配置
  4. 页面中使用 $t('key') 调用多语言文本

示例：

// 语言包
const messages = {
  en: { hello: 'Hello' },
  zh: { hello: '你好' }
}

切换语言时调用 this.$i18n.locale = 'en' 即可。


在 UniApp 中实现国际化（多语言支持）可以通过以下步骤完成，主要依赖 Vue I18n 库和 UniApp 的全局配置。以下是具体实现方法：

1. 安装 Vue I18n

使用 npm 或 yarn 安装 Vue I18n（如果项目支持）：

npm install vue-i18n
# 或
yarn add vue-i18n

如果 UniApp 项目不支持直接安装，可以手动引入 Vue I18n 文件（例如通过 HBuilderX 导入）。

2. 创建语言包

在项目中创建 locale 或 lang 文件夹，并添加语言文件，例如：

  • lang/zh-CN.js（中文）
  • lang/en-US.js（英文）

示例内容：

// zh-CN.js
export default {
  welcome: '欢迎使用应用',
  button: {
    confirm: '确认',
    cancel: '取消'
  }
}

// en-US.js
export default {
  welcome: 'Welcome to the app',
  button: {
    confirm: 'Confirm',
    cancel: 'Cancel'
  }
}

3. 配置 Vue I18n

在 main.js 中初始化 Vue I18n：

import { createApp } from 'vue'
import App from './App.vue'
import { createI18n } from 'vue-i18n'
import zhCN from './lang/zh-CN.js'
import enUS from './lang/en-US.js'

const i18n = createI18n({
  locale: 'zh-CN', // 默认语言
  messages: {
    'zh-CN': zhCN,
    'en-US': enUS
  }
})

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

4. 在页面中使用

在 Vue 组件模板或脚本中通过 $t 方法调用语言包：

<template>
  <view>
    <text>{{ $t('welcome') }}</text>
    <button>{{ $t('button.confirm') }}</button>
  </view>
</template>

5. 动态切换语言

通过修改 locale 实现语言切换，例如在方法中：

methods: {
  switchLanguage(lang) {
    this.$i18n.locale = lang // 例如 'en-US'
    uni.setStorageSync('language', lang) // 可选：持久化存储
  }
}

6. 持久化语言设置

使用 uni.setStorageSync 保存用户选择的语言，并在应用启动时读取：

// App.vue 的 onLaunch 中
const savedLang = uni.getStorageSync('language') || 'zh-CN'
this.$i18n.locale = savedLang

注意事项：

  • 确保 Vue I18n 版本与 Vue 3 兼容（UniApp 默认使用 Vue 3）。
  • 语言包键名保持一致，避免缺失翻译。
  • 测试多语言界面布局，确保文本长度变化不影响 UI。

通过以上步骤，即可在 UniApp 中实现简单的国际化功能。

回到顶部