uniapp i18n国际化多语言配置指南

在uniapp中配置i18n国际化多语言时，如何实现不同页面的语言切换功能？具体的配置步骤和注意事项有哪些？

2 回复

在uniapp中配置i18n多语言：

  1. 创建lang文件夹，添加语言文件（如zh.js、en.js）
  2. 在main.js引入并配置vue-i18n
  3. 页面中使用$t('key')调用翻译
  4. 切换语言时调用uni.setLocale

示例：

// zh.js
export default {
  hello: '你好'
}
// 使用
{{ $t('hello') }}

在 UniApp 中实现国际化多语言（i18n）可以通过以下步骤配置，使用 vue-i18n 库来管理多语言资源。以下是详细指南：

1. 安装依赖

首先，在项目中安装 vue-i18n：

npm install vue-i18n

2. 创建语言文件

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

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

示例内容：

// zh-CN.json
{
  "welcome": "欢迎使用 UniApp",
  "button": {
    "submit": "提交",
    "cancel": "取消"
  }
}

// en-US.json
{
  "welcome": "Welcome to UniApp",
  "button": {
    "submit": "Submit",
    "cancel": "Cancel"
  }
}

3. 配置 i18n

在 main.js 中引入并配置 vue-i18n：

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

const i18n = createI18n({
  locale: 'zh-CN', // 默认语言
  fallbackLocale: 'en-US', // 回退语言
  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.submit') }}</button>
  </view>
</template>

5. 动态切换语言

通过修改 locale 实现语言切换：

// 在方法中切换
changeLanguage(lang) {
  this.$i18n.locale = lang
}

6. 平台兼容性

UniApp 支持 Vue 3 组合式 API，也可使用 useI18n：

import { useI18n } from 'vue-i18n'

export default {
  setup() {
    const { t } = useI18n()
    return { t }
  }
}

注意事项：

  • 语言文件需按模块结构化，避免键名冲突。
  • 测试时确保语言文件路径正确。
  • 可结合本地存储持久化用户语言选择。

通过以上步骤，即可在 UniApp 中快速实现多语言支持。

回到顶部