uni-app与vue-i18n实现国际化多语言

发布于 1周前 作者 vueper 来自 Uni-App

uni-app与vue-i18n实现国际化多语言

踩了很多坑，终于捣鼓出来了。

import Vue from 'vue'  
import App from './App'  
import VueI18n from 'vue-i18n'  

Vue.use(VueI18n)  
Vue.config.productionTip = false  

const i18n = new VueI18n({  
  locale: 'en-US',  
  messages: {  
    'en-US': {  
      index: {  
        invite: 'Invite',  
        game: 'Game'  
      }  
    },  
    'zh-CN': {  
      index: {  
        invite: '邀请',  
        game: '游戏'  
      }  
    }  
  }  
})  

Vue.prototype._i18n = i18n  
App.mpType = 'app'  

const app = new Vue({  
  i18n,  
  ...App  
})  
app.$mount()

uniapp 不支持在取值表达式中直接调方法，因此，$t方法不可用，所以通过计算属性的方式：

<template>  
  <view class="uni-content">  
    <text>{{ i18n.invite }}</text>  
    <text>{{ i18n.game }}</text>  
  </view>  
</template>  

<script>  
export default {  
  computed: {  
    i18n () {  
      return this.$t('index')  
    }  
  }  
}  
</script>  

<style>  
</style>

更多国际化参考 https://ask.dcloud.net.cn/article/35872


Harmonyos Next教程
1 回复

在 Uni-app 中实现国际化多语言功能，可以通过集成 Vue I18n 来完成。以下是一个简单的实现示例，展示了如何在 Uni-app 项目中配置和使用 Vue I18n。

1. 安装 Vue I18n

首先，确保你已经安装了 Vue I18n。你可以通过 npm 或 yarn 安装它：

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

2. 配置 Vue I18n

在 Uni-app 项目的 main.js 文件中，配置 Vue I18n：

import Vue from 'vue'
import App from './App'
import VueI18n from 'vue-i18n'

Vue.config.productionTip = false

Vue.use(VueI18n)

const messages = {
  en: {
    welcomeMessage: 'Welcome'
  },
  zh: {
    welcomeMessage: '欢迎'
  }
}

const i18n = new VueI18n({
  locale: 'en', // 设置默认语言
  messages, // 设置语言包
})

new Vue({
  i18n,
  render: h => h(App),
}).$mount('#app')

3. 使用国际化资源

在你的组件中，可以通过 $t 方法来访问国际化资源。例如，在 App.vue 中：

<template>
  <view>
    <text>{{ $t('welcomeMessage') }}</text>
    <button @click="changeLanguage('zh')">切换到中文</button>
    <button @click="changeLanguage('en')">切换到英文</button>
  </view>
</template>

<script>
export default {
  methods: {
    changeLanguage(lang) {
      this.$i18n.locale = lang
    }
  }
}
</script>

<style>
/* 添加你的样式 */
</style>

4. 切换语言

在上面的示例中，我们添加了两个按钮，用于切换应用的语言。点击按钮时，会调用 changeLanguage 方法，改变 this.$i18n.locale 的值，从而动态切换语言。

5. 完整示例

结合以上步骤，你将得到一个简单的 Uni-app 项目，它支持通过 Vue I18n 实现国际化多语言。你可以根据需要扩展 messages 对象，添加更多的语言和对应的翻译内容。

通过上述步骤，你可以在 Uni-app 项目中轻松实现国际化多语言功能。这个示例展示了基本的配置和使用方法，你可以根据实际需求进行进一步的定制和扩展。

回到顶部