uniapp 使用i18n国际化接口返回中文的解决方法

在uniapp项目中集成i18n实现国际化时，接口返回的数据仍然是中文，请问应该如何处理？我已在vue-i18n中配置了多语言包，但动态获取的接口数据无法自动翻译。是否需要手动转换接口返回的字段？或是需要在请求拦截器中对响应数据进行处理？求具体实现方案。

2 回复

在uniapp中，使用i18n处理接口返回中文的方法：

  1. 在接口请求拦截器中添加语言标识
header: {
  'Accept-Language': uni.getLocale()
}

  1. 服务端根据header返回对应语言数据

  2. 或在前端对接口返回数据做二次翻译：

const translatedData = this.$t(apiData.key)

推荐第一种方案，由服务端控制语言返回。


在 UniApp 中，如果后端接口返回的是中文内容，但需要根据用户语言环境动态切换为其他语言（如英文），可以通过以下步骤结合 vue-i18n 实现国际化：

步骤：

  1. 安装 vue-i18n：

    npm install vue-i18n

  2. 创建语言包（如 lang/zh.js 和 lang/en.js）：

    // lang/zh.js
export default {
  welcome: '欢迎',
  user: {
    name: '用户名'
  }
}

// lang/en.js
export default {
  welcome: 'Welcome',
  user: {
    name: 'Username'
  }
}

  3. 配置 i18n（在 main.js 中）：

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

const i18n = createI18n({
  locale: uni.getLocale(), // 获取系统当前语言
  messages: { zh, en }
})

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

  4. 处理接口数据：

    • 假设接口返回数据为 { code: 200, message: "成功" }，但需要根据语言显示。
    • 在语言包中定义对应键值：
      // lang/zh.js
export default {
  apiMessage: {
    success: '成功'
  }
}

// lang/en.js
export default {
  apiMessage: {
    success: 'Success'
  }
}
    • 在请求拦截或组件中映射：
      import { useI18n } from 'vue-i18n'

export default {
  setup() {
    const { t } = useI18n()
    // 假设 res 是接口返回数据
    const mapApiMessage = (res) => {
      const messageMap = {
        '成功': t('apiMessage.success')
      }
      return messageMap[res.message] || res.message
    }
    return { mapApiMessage }
  }
}

  5. 动态切换语言：

    const { locale } = useI18n()
// 切换为英文
locale.value = 'en'

注意事项：

  • 如果接口返回的是固定中文，需在语言包中预定义所有可能的值。
  • 对于动态内容（如用户生成的数据），通常无法直接国际化，需后端支持多语言或使用机器翻译。

通过以上方法，可以灵活地将接口中文响应转换为用户设定的语言。

回到顶部