Vue3 - 在项目中使用vue-i18n不生效的问题

检查和配置 Vue I18n

确保你已经正确安装了Vue I18n并且配置了组合API模式。

安装 Vue I18n

npm install vue-i18n@next

配置 i18n.js

import { createI18n } from 'vue-i18n';
import messages from './messages';const i18n = createI18n({legacy: false, // 使用组合 API 模式locale: 'en', // 设置默认语言messages, // 多语言内容
});export default i18n;

如果没有配置 legacy: false，使用会报错。

如果你的多语言文件是 message.js，那么可以按照上图进行配置。

如果你是这样子的写法，或者其他的语法：

那么，你的js配置就要改一下了：

import { createI18n } from 'vue-i18n';
import en from "@/i18n/en";
import zh from "@/i18n/zh";const i18n = createI18n({legacy: false,locale: 'en', // 设置默认语言messages: {en, zh},
});export default i18n;

messages这个key显示的写出来，不然页面一直显示的key，不会显示对应的文本。