vue3使用的国际化库为：i18n 安装方式： npm install vue-i18n@next 安装完成后在src文件夹下新建lang文件夹 在lang文件夹下新建需要语言转换的文件夹，这里以中文zh和英文en举例，在这两个文件夹下新建需要转换的语言 在zh的index.ts中写好我们需要转换的语言 en的index.ts也是一样的 在lang文件夹下新建index.ts文件，在该文件下引入刚才的建立的语言包，配置需要使用的默认语言 // lang -> index.ts import { createI18n } from 'vue-i18n' import zh from './zh' import en from './en' /* 这里必须是messages名称 */ const messages = { 'zh-US' : zh, 'en-US' : en } const i18n = createI18n({ legacy: false, // 使用 Composition API 模式，则需要将其设置为false globalInjection: true, //全局生效$t locale: 'zh-US', // 默认使用的语言 messages, // 使用数据源 }) export { i18n } 在main.ts文件下导入并挂载i18n import { createApp } from "vue"; import "./style.css"; import App from "./App.vue"; import router from "./router/index"; // 引入国际化 import { i18n } from './lang/index' const app = createApp(App) /* globalProperties一个用于注册能够被应用内所有组件实例访问到的全局属性的对象。 */ app.config.globalProperties.$i18n = i18n; app .use(router) .use(i18n) // 挂载i18n .mount("#app") main文件设置好后，我们就可以在页面使用了，页面的使用方法： import { useI18n } from "vue-i18n"; const { t } = useI18n(); const lang = ref(true); // 开关，语言状态切换 /* getCurrentInstance()可以用来获取当前组件实例 */ let current = getCurrentInstance()?.appContext.config.globalProperties as any; // 根据状态，切换国际化 const languageChange = (val : boolean) => { // false英 true中，此处的zh-US就是lang -> index.ts -> messages对象的键名 val ? current.$i18n.locale = 'zh-US' : current.$i18n.locale = 'en-US' } 如果是后台返回的菜单数据，我们需要根据菜单数据的键做语言处理，例如这样的 首先需要在lang对应的中英文文件夹下新增语言配置，由于后台返回的键名都是一样的，我们可以使用 键+id 的方法让这些键保持独立，例如： 菜单一般都是遍历出来的，在页面中用模板字符串拼接id即可 { { t(`menu.authName${item.id}`) }} 如果觉得这篇文章对你有帮助，欢迎点赞、收藏、转发哦~