vue3+ts+i18n国际化

一、安装

pnpm install vue-i18n

二、src/lang文件夹，语言包及基础配置

en.json

{
  "login":"login"
}

zh.json

 {
  "login":"登录"
}

index.ts

import { createI18n } from "vue-i18n";
import zh from "./zh.json";
import en from "./en.json";


const i18n: any = createI18n({
  locale:  "zh",
  legacy: false,
  globalInjection: true,
  messages: {
    zh: {
      ...zh,
    },
    en: {
      ...en,
    }
  }
});
export { i18n };

三、nav文件，切换中英文的图标

四、下拉切换

 const { locale, t } = useI18n();
 locale.value = "zh";

五、main.ts使用插件

`import { i18n } from "@/lang/index";`
app.use(i18n)`

六、项目中使用

<el-button>{{$t('login')}}</el-button>