vue3使用i18n实现国际化

本文主要是介绍vue3使用i18n实现国际化，希望对大家解决编程问题提供一定的参考价值，需要的开发者们随着小编来一起学习吧！

1. 安装vue-i18n

npm install vue-i18n

2. 创建一个ts文件用于存储各种翻译
   
   globalLang.ts的内容如下：

export default {"cn": {},"en": {},"de": {},"es": {},"fr": {},"id": {},"it": {},"jp": {},"kr": {},"pt": {},"tw": {}
};

3. 在main.ts中全局引入

import App from "./App.vue"
import { createApp } from "vue"
import { createI18n } from "vue-i18n"
import globalLang from "./lang/globalLang"
const lang = new URLSearchParams(location.search.substr(1)).get("lang") || "zh"
const app = createApp(App)
const i18n = createI18n({legacy: false,locale: lang,fallbakLocale: "en",silentTranslationWarn: true,messages: globalLang,fallbackWarn: false,missingWarn: false
})
app.use(i18n).mount("#app")

4. 使用方式

• < template >中可以直接使用, 翻译文件在globalLang中

<template><span>{{ $t("toLogin") }}</span>
</template>

• < template >中可以直接使用, 翻译再vue中

<template><span>{{ t("toLogin") }}</span>
</template>
<i18n>
{"zh": {“toLogin”: "去登录"},"en": {“toLogin”: "login"}
}
</i18n>

• 在vue的script文件中

import { useI18n} from 'vue-i18n';
const { t } = useI18n();
const toLogin = () => {console.log(t("toLogin"));
}

这篇关于vue3使用i18n实现国际化的文章就介绍到这儿，希望我们推荐的文章对编程师们有所帮助！

---