uniapp 切换多语言方案

在 uni-app 中，你可以使用 Vue-i18n 插件来实现多语言方案。以下是一个简单的使用步骤：

1. 安装 Vue-i18n 插件。

npm install vue-i18n

2. 在 main.js 中引入 Vue-i18n，并创建一个 i18n 实例。

import VueI18n from 'vue-i18n'
import messages from './locales'

Vue.use(VueI18n)

const i18n = new VueI18n({
  locale: 'en', // 默认语言
  fallbackLocale: 'en', // 如果找不到当前语言的翻译，则回退到默认语言
  messages // 引入的翻译文件
})

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

3. 在 locales 文件夹中创建对应语言的翻译文件，例如：

// locales/en.js
export default {
  hello: 'Hello',
  world: 'World'
}

// locales/zh-CN.js
export default {
  hello: '你好',
  world: '世界'
}

4. 在组件中使用 `$t` 方法来获取翻译后的文本。

<template>
  <div>
    <p>{{ $t('hello') }}, {{ $t('world') }}!</p>
  </div>
</template>

5. 在组件中使用 `$i18n.locale` 来切换语言。

<template>
  <div>
    <p>{{ $t('hello') }}, {{ $t('world') }}!</p>
    <button @click="switchLanguage">Switch Language</button>
  </div>
</template>

<script>
export default {
  methods: {
    switchLanguage() {
      if (this.$i18n.locale === 'en') {
        this.$i18n.locale = 'zh-CN'
      } else {
        this.$i18n.locale = 'en'
      }
    }
  }
}
</script>

这样就可以实现在 uni-app 中切换多语言方案了。