uniapp+vue3+ts+i18n国际化

uniapp+vue3+ts+i18n国际化

1.安装vue-i18n

pnpm install vue-i18n --save

2.locales文件夹

• 在src目录下，新建一个locales文件夹，新建一个index.ts文件

// index.ts

import { createI18n } from "vue-i18n"
import LangZHCN from "./lang/zh"
import LangEN from "./lang/en"
// console.log("当前系统语言", uni.getLocale())
const defaultLang = uni.getStorageSync("lang") || "zh"
// console.log("当前系统语言", defaultLang, typeof defaultLang)

const i18n = createI18n({
  locale: defaultLang || "zh",
  messages: {
    en: LangEN,
    zh: LangZHCN
  },
  fallbackLocale: "zh", // 回退语言
  legacy: false
})
export default i18n

• 在locales文件夹下新建一个lang文件夹，存放各语言ts文件，如下图所示：
  

1. en.ts

// en.ts
const locale = {
  system: {
    title: "RuoGuo"
  }
}

export default locale

2. zh.ts

// zh.ts
const locale = {
  system: {
    title: "若果"
  }
}

export default locale

3.在main.ts导入i18n

import { createSSRApp } from "vue"
import App from "./App.vue"
import store from "./store"
import VueI18n from "@/locales" // 引入i18n
export function createApp() {
  const app = createSSRApp(App)
  app.use(VueI18n)
  app.use(store)
  return {
    app
  }
}

4.vue文件中使用

<template>
  <div class="pinia">
    <div class="name">用户名:{{ userStore.name }}</div>
    <div class="length">长度:{{ userStore.nameLength }}</div>
    <div class="length">i18n:{{ t("system.title") }}</div>
    <button @click="updateName(true)">action修改store中的name</button>
    <button @click="updateName(false)">patch修改store中的name</button>
    <button @click="mock">mock</button>
    <button @click="login">login</button>
  </div>
</template>

<script lang="ts" setup>
import { useUserStore } from "@/store"
import * as UserApi from "@/api/user"
import { useI18n } from "vue-i18n" // 使用vue-i18n的useI18n方法

const userStore = useUserStore()
const { locale, t } = useI18n()

// 初始化
uni.setNavigationBarTitle({ title: t("system.title") }) //修改标题

const login = async () => {
  await userStore.useLogin({
    user: {
      email: "jay@qq.com",
      password: 123456
    }
  })
}

const mock = async () => {
  const res = await UserApi.getUser()
  console.log("🚀 ~ file: index.vue:29 ~ mock ~ res:", res)
}

const updateName = (isAction: boolean) => {
  if (isAction) {
    // action 修改 store 中的数据
    userStore.updateName("userStore.updateName方式")
  } else {
    // 未定义 action 时可以用 $patch 方法直接更改状态属性
    // $patch 修改 store 中的数据
    userStore.$patch({
      name: "userStore.$patch方式"
    })
  }
}
</script>

• 刚学会，再研究研究