vue3使用i18n实现国际化

1. 安装vue-i18n

npm install vue-i18n

2. 创建一个ts文件用于存储各种翻译
   
   image.png
   
   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"));
}