vue3使用 vue-i18n 国际化多语言

安装：

npm install vue-i18n

main,js

import { createI18n } from 'vue-i18n'
import language from './utils/language'// 引入语言文件
const i18n = createI18n({
    legacy :false,
    locale: 'zh-CN', // set locale
    // fallbackLocale: 'en', // set fallback locale
    messages: language, // set locale messages
    // If you need to specify other options, you can set other options
    // ...
})
app.use(i18n)

language文件夹下内容

zh-cn.js

export default {
    common: {
        username: "账号",
        password: "密码",
    },
    login:{
        login:"登录"
    }
};

en.js

export default {
    common: {
        username: "USERNAME",
        password: "PASSWORD",
    },
    login: {
        login: "Login"
    }
};

index.js

import zhCn from "./zh-cn";
import en from "./en";
const language = {
    'zh-CN': zhCn,
    'en-US': en
}
export default language

在标签中使用

<button>{{$t("login.login")}}</button>

在script setup中使用

import { useI18n } from 'vue-i18n'
const $I18n = useI18n()
$I18n.t('login.login')