uniapp +vue3 ts 实现h5端国际化

插件工具：i18n

安装命令：

npm install vue-i18n --save

//main.ts

import { createSSRApp } from "vue";
import App from "./App.vue";
import i18n from "./lange";

export function createApp() {
  const app = createSSRApp(App);
  app.use(i18n)
  return {
    app,
  };
}

//en.ts

import * as K from "@/lange/langeKeyConst";
export const enLang = {
  [K.KEY_WELCOME]: "welcome",
}

//zh.ts

import * as K from "@/lange/langeKeyConst";
export const zhLang = {
  [K.KEY_WELCOME]: "欢迎",

}

//langeKeyConst.ts

export const KEY_WELCOME = "welcome"

//index.ts

import { createI18n } from 'vue-i18n'
import {zhLang} from "@/lange/zh";
import {enLang} from "@/lange/en";

 
const messages = {
  zh: {
    ...zhLang
  },
  en: {
    ...enLang
  }
}

const i18n = createI18n({
  locale: 'zh', // 设置当前语言类型
  legacy: false, // 如果要支持compositionAPI，此项必须设置为false;
  globalInjection: true, // 全局注册$t方法
  messages
})

export default i18n

//App.vue

import {getStorage} from "@/common/tools";
import { useI18n } from "vue-i18n";
const { locale } = useI18n();

onLaunch(() => {
  // 修改语言
  if(!getStorage('language')) return
  locale.value=getStorage('language')
  uni.setLocale(locale.value)//针对项目中使用了z-paging分页组件
});

//首页

<template>
  <view>
        <view class="languageBox" @click="langeChange">
            <k-icon name="language" :size="38" color="#5296F2" class="mt-4"/>
        </view>
        <up-picker
        :show="showLanguagePicker"
        :columns="languageList"
        keyName="label"
        @confirm="confirm"
        @cancel="showLanguagePicker=false"
        confirmColor="#03B86F"
        :title="t(K.KEY_CHANGE_LANGUAGE)"
        :confirmText="t(K.KEY_CONFIRM)"
        :cancelText="t(K.KEY_CANCEL)"
        >
        </up-picker>
    </view>
</template>

<script setup lang="ts">
import { setStorage } from "@/common/tools";
import { useI18n } from "vue-i18n";
import * as K from "@/lange/langeKeyConst";
import { reactive, ref } from "vue";
import KIcon from "@/components/KIcon.vue";

const { t } = useI18n();
const showLanguagePicker = ref(false);
const languageList = reactive([
  [
    {
      label: "中文",
      value: "zh",
    },
    {
      label: "English",
      value: "en",
    },
  ],
]);

// 切换语言
function langeChange() {
  showLanguagePicker.value = true;
}
// 选择语言
function confirm(e: any) {
  showLanguagePicker.value=false
  setStorage('language',e.value[0].value)
  location.reload();
}
</script>

//设置缓存
export const setStorage = (key: string, value: unknown) => {
	uni.setStorageSync(key, JSON.stringify(value));
};
//获取缓存
export const getStorage = (key: string) => {
	const res = uni.getStorageSync(key);
	return res ? JSON.parse(res) || null : null;
};

z-paging分页组件

i18n国际化模块 | z-paging文档