官网

vue-i18n

安装

yarn add vue-i18n@9

代码

json文件

en.json

{
    "hi": "hi"
}

zh.json

{
    "hi": "你好"
}

main.js

// 引入
import { createI18n } from "vue-i18n";
import en from "@/lang/en.json";
import zh from "@/lang/zh.json";

// 实例化
const i18n = createI18n({
  legacy: false, // 使用vue3组合API
  locale: "zh", // 默认中午
  fallbackLocale: "en", // 兜底英文
  messages: {
    zh,
    en
  },
});

// 挂载
const app = createApp(App);
app.use(i18n);

页面使用

<template>
    <h1>{{t('hi')}}</hi>
</template>
<script setup>
// 引入API
import { useI18n } from "vue-i18n";

const { t, locale } = useI18n();

// 改变中英文
locale.value = "zh" || "en";
</script>