本文主要是介绍vue3使用i18n实现国际化，希望对大家解决编程问题提供一定的参考价值，需要的开发者们随着小编来一起学习吧！
- 安装vue-i18n
npm install vue-i18n
- 创建一个ts文件用于存储各种翻译
globalLang.ts的内容如下：
export default {"cn": {},"en": {},"de": {},"es": {},"fr": {},"id": {},"it": {},"jp": {},"kr": {},"pt": {},"tw": {}
};
- 在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")
- 使用方式
- < 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实现国际化的文章就介绍到这儿，希望我们推荐的文章对编程师们有所帮助！
