vue3的多语言脚本(vue-i18n)的各种场景

引入vue-i18n依赖文件

cnpm install vue-i18n@next

多语言的使用文件夹结构和核心文件处理

en.ts文件

export default {
  common: {
    submitBtn: 'Submit'
  }
 }

zh.ts文件

export default {
  common: {
    submitBtn: '确定'
  }
 }

index.ts文件

import { createI18n } from "vue-i18n"
import zh from "./lang/zh"
import en from "./lang/en"

const i18n = createI18n({
	locale: localStorage.getItem("locale") || navigator.language.slice(0, 2),
	legacy: false,
	globalInjection: true, //全局生效$t
	messages: {
		zh,
		en
	}
})
export default i18n

引入场景

非库文件main.ts

import { createApp } from 'vue'
import App from './App.vue'
import locale from "./locale"
const app = createApp(App)
app.provide("$tt", locale.global.t)
app.use(locale)
app.mount('#app')

库文件index.ts

import { getCurrentInstance } from "vue"
import locale from "./locale"
export default {
	install(app: App, opts: any = {}): void {
		app.provide("$tt", locale.global.t) //多语言到ts中使用,模板中直接通过$t("")进行使用,或t("")
		app.use(locale) //多语言的挂载
	}
}

使用

在vue的template中使用

方案一
<div>{{$t("common.submitBtn")}}</div>

方案二
<template><div>{{ttttt("common.submitBtn")}}</div></template>
<script setup lang="ts">
import {  inject } from "vue";
const ttttt: any = inject("$tt");
</script >

在vue的script部分使用

<script setup lang="ts">
import {  inject } from "vue";
const ttttt: any = inject("$tt");
const onXXXXX = () => {
    console.log("测试:", ttttt("common.submitBtn"));
};
</script >

在外部ts使用

import locale from "../locale"
const tt = locale.global.t
export function xxx() {
    console.log("xxxxx", tt("common.submitBtn"))
    return "222"
}