尝试搭建 Vue3+nuxt3+typescript+vuex+i18n+axios+element plus+...(四) 之 i18n 国际化

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,
//   });
// };