vue-i18n在vue3中的引用方法是:
// import { useI18n } from "vue-i18n";
// const { t } = useI18n();
{{ $t("message.account.accountPlaceholder1") }}
便可以使用 ,
在nuxt中,需要把i18n的配置文件,放到plugins目录下面:
plugins 目录下, 新建i18n.js
在nuxt.config.js中配置
plugins: ["@/plugins/i18n.js"],
需要使用 defineNuxtPlugin 方式引入, 至于原理, 也。。。。
也可以按照网上的 配置文件,简化
import { defineNuxtPlugin } from "~~/.nuxt/imports";
// import ElementPlus from "element-plus";
import { createI18n } from "vue-i18n";
import zhcnLocale from "element-plus/lib/locale/lang/zh-cn";
import enLocale from "element-plus/lib/locale/lang/en";
import zhtwLocale from "element-plus/lib/locale/lang/zh-tw";
import { useStore } from "@/store/index";
import nextZhcn from "@/i18n/lang/zh-cn";
import nextEn from "@/i18n/lang/en";
import nextZhtw from "@/i18n/lang/zh-tw";
import pagesLoginZhcn from "@/i18n/pages/login/zh-cn";
import pagesLoginEn from "@/i18n/pages/login/en";
import pagesLoginZhtw from "@/i18n/pages/login/zh-tw";
import pagesFormI18nZhcn from "@/i18n/pages/formI18n/zh-cn";
import pagesFormI18nEn from "@/i18n/pages/formI18n/en";
import pagesFormI18nZhtw from "@/i18n/pages/formI18n/zh-tw";
// 定义语言国际化内容
/**
* 说明:
* /src/i18n/lang 下的 ts 为框架的国际化内容
* /src/i18n/pages 下的 ts 为各界面的国际化内容
*/
const messages = {
[zhcnLocale.name]: {
...zhcnLocale,
message: {
...nextZhcn,
...pagesLoginZhcn,
...pagesFormI18nZhcn,
},
},
[enLocale.name]: {
...enLocale,
message: {
...nextEn,
...pagesLoginEn,
...pagesFormI18nEn,
},
},
[zhtwLocale.name]: {
...zhtwLocale,
message: {
...nextZhtw,
...pagesLoginZhtw,
...pagesFormI18nZhtw,
},
},
};
// 导出语言国际化
// export const i18n = createI18n({
// locale: store.state.themeConfig.themeConfig.globalI18n,
// fallbackLocale: zhcnLocale.name,
// messages,
// });
const store = useStore();
export default defineNuxtPlugin((nuxtApp) => {
const i18n = createI18n({
locale: store.state.themeConfig.themeConfig.globalI18n,
fallbackLocale: zhcnLocale.name,
messages,
});
// nuxtApp.vueApp.use(ElementPlus, { i18n: i18n.global.t });
nuxtApp.vueApp.use(i18n);
});
// export default ({ app, store }) => {
// app.i18n = createI18n({
// locale: store.state.themeConfig.themeConfig.globalI18n,
// fallbackLocale: zhcnLocale.name,
// messages,
// });
// };