- 安装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>
import { useI18n} from 'vue-i18n';
const { t } = useI18n();
const toLogin = () => {
console.log(t("toLogin"));
}
