uniapp 三端(小程序、H5、App)开发练习04

国际化（Internationalization，通常缩写为"i18n"）是指设计和开发软件应用程序，使其能够轻松地适应不同的语言、文化和地区的需求。国际化不仅仅涉及将文字翻译成其他语言，还包括调整日期、时间、货币格式，以及考虑不同文化中的布局、颜色和图标等因素。通过国际化，开发人员可以使其应用程序更易于被全球用户理解和接受，从而扩大应用程序的市场和影响力。

• 安装依赖

npm install vue-i18n

• 语言包目录

这里代码具体看项目，项目地址文章后面

• main.ts 引入

import { createSSRApp } from 'vue'
import App from './App.vue'
import { setupI18n } from './locales'
export function createApp() {
  const app = createSSRApp(App)
  setupI18n(app)
  return {
    app,
  }
}

• store/locales.ts

/*
 * @Author: vhen
 * @Date: 2024-07-28 15:32:18
 * @LastEditTime: 2024-07-28 15:35:52
 * @Description: 现在的努力是为了小时候吹过的牛逼！
 * @FilePath: \fs-uniapp\src\store\locales.ts
 *
 */
import { i18n } from '@/locales'
import { defineStore } from 'pinia'
import type { LocaleType } from '/#/app'
export const useLocaleStore = defineStore(
  'locale',
  () => {
    const locale = ref(i18n.global.locale.value)
    // 设置locale
    const setLocale = (lang: LocaleType) => {
      locale.value = lang
      i18n.global.locale.value = lang
    }

    return { locale, setLocale }
  },
  {
    persist: true,
  },
)

• 页面中使用

<script lang="ts" setup>
import { useLocaleStore } from '@/store/locales'
import type { LocaleType } from '@/types/app'
import { useI18n } from 'vue-i18n'
const { t } = useI18n()
const useLocale = useLocaleStore()
const curLocale = ref(useLocale.locale)

const toggleLocale = (lang: LocaleType) => {
  useLocale.setLocale(lang)
  curLocale.value = lang
}
</script>
<template>
  <up-button type="primary" text="英文" v-if="curLocale === 'zh'" @click="toggleLocale('en')"></up-button>
  <up-button type="primary" text="中文" v-else @click="toggleLocale('zh')"></up-button>
  {{ t('app.header.title') }}
</template>
<style lang="scss" scoped></style>