Vue3 + ts + element-plus + i18n 国际化配置

前言

本文主要记录下在 Vue3 + ts + element-plus + i18n 项目中的国际化配置以及动态语言切换。

一、安装 vue-i18n 依赖

npm install vue-i18n@next

 

二、准备语言包

创建 src/i18n/lang 语言包目录，中文语言包为 zh-cn.ts，英文语言包为 en.ts。

// 中文语言包：\src\i18n\lang\zh-cn.ts
export default {
  home: {
    name: "首页",
  },
};

// 英文语言包：\src\i18n\lang\en.ts
export default {
  home: {
    name: "home",
  },
};

三、创建 i18n 实例

// \src\i18n\index.ts
import { createI18n } from "vue-i18n";
// 语言包
import zhCn from "./lang/zh-cn";
import en from "./lang/en";

const i18n = createI18n({
  locale: sessionStorage.getItem("localeLang") || "zhCn",
  messages: {
    zhCn,
    en,
  },
});

export default i18n;

四、i18n 全局注册

// \src\main.ts
import { createApp } from "vue";
import App from "./App.vue";
import router from "./router";
import store from "./store";
// i18n
import i18n from "@/i18n/index";

const app = createApp(App);
app.use(i18n);
app.use(store).use(router).mount("#app");

五、页面使用

六、切换语言

// \src\store\state.ts
export type State = {
  language: string;
};

export const state: State = {
  language: sessionStorage.getItem("localeLang") || "zhCn",
};

// \src\store\mutations.ts
import { MutationTree } from "vuex";
import { State } from "./state";

export const mutations: MutationTree = {
  // 修改语言
  CHANGE_LANGUAGE(state, value: string) {
    state.language = value;
    sessionStorage.setItem("localeLang", value);
  },
};

 页面头部切换语言按钮。

七、Element-Plus 国际化配置

Element-Plus 官方提供全局配置 Config Provider 实现国际化。

 效果如下：