vue3.0+ts后台国际化

main.ts导入注册全局

import i18n from './i18n';
app.use(i18n);

导入页面 页面使用

import { useI18n } from 'vue-i18n';
const { locale, t } = useI18n();

<h4>{{ t('login.title') }}</h4>
<a-menu :selected-keys="language" @click="changeLanguage">
            <a-menu-item key="en">English</a-menu-item>
            <a-menu-item key="zh_CN">简体中文</a-menu-item>
            <a-menu-item key="de_DE">德语</a-menu-item>
 </a-menu>

请求语言包

import type { ApiResult, } from '@/api';
import request from '@/utils/requestTest';
/*
 * 返回 语言类型
 */
export async function getCurrencyListFunc() {
  const res = await request.post<ApiResult<any>>('/api/Language/GetBusinessLanguage');
  if (res.data.status === 200) {
    return res.data.response;
  }
  return Promise.reject(new Error(res.data.msg));
}

新建文件i18n ,(注意首次请求完成location.reload()刷新页面一下)

import { SetlanguageFotmatFunc, GetlanguageFotmatFunc } from "@/utils/languageFilter";

import { createI18n } from 'vue-i18n';
import { I18N_CACHE_NAME } from '@/config/setting';
/**
 * 国际化配置
 */

import { getCurrencyListFunc } from "@/api/lang/index";
const langFunc = () => {
  if (!localStorage.getItem("local")) {
    getCurrencyListFunc().then((res) => {
      SetlanguageFotmatFunc(res);
      location.reload();
    });
  }
}
langFunc(); 
const messages = GetlanguageFotmatFunc();
const i18n = createI18n({
  messages,
  silentTranslationWarn: true,
  // 默认语言
  locale: localStorage.getItem(I18N_CACHE_NAME) || 'zh_CN'
});

export default i18n;

新建文件/utils/languageFilter

/**
 * 设置语言包
 */
export function SetlanguageFotmatFunc(data: {controvalue  : string | number; china: any; germany: any; english: any;}[]) {
    let zh_CN_dic = {};
    let de_DE_dic = {};
    let en_dic = {};
    data.forEach((element: { controvalue: string | number; china: any; germany: any; english: any; }) => {
        zh_CN_dic[element.controvalue] = element.china;
        de_DE_dic[element.controvalue] = element.germany;
        en_dic[element.controvalue] = element.english;
    });
    localStorage.setItem("en", JSON.stringify(en_dic));
    localStorage.setItem("zh_CN", JSON.stringify(zh_CN_dic));
    localStorage.setItem("de_DE", JSON.stringify(de_DE_dic));
    localStorage.setItem("local","set");
    
}


export function GetlanguageFotmatFunc() {
    try {
        return {
            zh_CN: JSON.parse(localStorage.getItem("zh_CN") || ""),
            de_DE: JSON.parse(localStorage.getItem("de_DE") || ""),
            en: JSON.parse(localStorage.getItem("en") || ""),
          };
        
    } catch (error) {
         
    }
}

随便新建一个文件导出变量

export const I18N_CACHE_NAME = 'i18n-lang';