uniapp vue3 多语言开发

在uni-app中使用Vue3实现多语言切换功能，可以借助 vue-i18n 插件。
以下是一个简化的示例，展示了如何在Vue3项目中集成 vue-i18n 并实现多语言切换：

1.安装 vue-i18n 插件：
npm install vue-i18n

2.在 main.ts/main.js 文件中导入并初始化 vue-i18n

import { createApp } from 'vue'
import i18n from 'vue-i18n'
import App from './App.vue'

// 加载多语言资源文件
import enLocale from '@/locales/en.json'
import zhLocale from '@/locales/zh.json'

const messages = {
  en: enLocale,
  zh: zhLocale
}

const i18nInstance = i18n.createI18n({
  locale: 'en', // 默认语言
  fallbackLocale: 'en', // 备选语言
  messages
})

const app = createApp(App)

app.use(i18nInstance)

app.mount('#app')

// 在全局或组件中使用
app.config.globalProperties.$t = i18nInstance.global.t

3.创建多语言资源文件（例如在 /locales 目录下创建 en.json 和 zh.json）

// locales/en.json
{
  "hello": "Hello",
  "world": "World"
}

// locales/zh.json
{
  "hello": "你好",
  "world": "世界"
}

4.在Vue组件中使用 $t 函数显示多语言文本

<template>
  <view>
    <text>{{ $t('hello') }} {{ $t('world') }}</text>
  </view>
</template>

5.切换语言

// 在某个方法中切换语言
this.$i18n.locale = 'zh'; // 切换到中文

这是一般流程，我的项目有些许差异

import { createI18n } from 'vue-i18n'

// 加载多语言资源
import en from './locales/en.json'
import zh from './locales/zh.json'

const i18n = createI18n({
  legacy: false, // Vue3模式下必须设置为false
  globalInjection: true, // 允许注入到全局 this 上
  locale: 'zh', // 默认语言
  messages: {
    en,
    zh
  }
})

export function createApp() {
  const app = createSSRApp(App)
  const store = Pinia.createPinia()

  // 注册i18n到app
  app.use(i18n)

  // 挂载全局方法
  app.config.globalProperties.$initPrintServer = initPrintServer
  app.config.globalProperties.$sendPrintData = sendPrintData
  store.use(createUnistorage())
  app.use(store).use(uviewPlus);

  return {
    app,
    Pinia,
    i18n // 返回i18n实例供其他地方使用
  }
}

legacy: false： 在Vue 3中，vue-i18n 的工作模式有两种：legacy模式和composition API模式。legacy: false 表明我们使用的是 composition API 模式，这是Vue 3推荐的使用方式，可以充分利用Vue 3的Composition API。

globalInjection: true： 这个选项允许将 $t、$tc、$te 等 vue-i18n 的方法注入到每个Vue组件的 this 上，使得在组件内部可以直接使用 this.$t('message.hello') 这样的方式来翻译文本。如果不设置为 true，则需要通过 setup() 函数中的 useI18n 来获取i18n实例。

locale: 'zh'： 这是设置默认的语言环境，此处设置为中文（简体）。当应用启动时，vue-i18n 将会使用这个语言环境的翻译资源。

messages： 这个对象存储了不同语言环境的翻译消息。在这里，en 和 zh 分别对应英文和中文的翻译资源。例如，en 对应的是英文资源，zh 对应的是中文资源。这两个资源来自于你之前导入的 JSON 文件，如 import en from './locales/en.json' 和 import zh from './locales/zh.json'