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");

五、页面使用

<template>
  <div class="home">vue3-app {{ $t("home.name") }}</div>
</template>

<script lang="ts" setup name="HomeView"></script>

六、切换语言

// \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<State> = {
  // 修改语言
  CHANGE_LANGUAGE(state, value: string) {
    state.language = value;
    sessionStorage.setItem("localeLang", value);
  },
};

 页面头部切换语言按钮。

<!-- \src\components\MyHeader.vue -->
<template>
  <div class="header">
    <el-dropdown @command="handleCommand">
      <span class="el-dropdown-link">
        {{ langType[language] }}
        <el-icon class="el-icon--right">
          <arrow-down />
        </el-icon>
      </span>
      <template #dropdown>
        <el-dropdown-menu>
          <el-dropdown-item command="zhCn">中文</el-dropdown-item>
          <el-dropdown-item command="en">English</el-dropdown-item>
        </el-dropdown-menu>
      </template>
    </el-dropdown>
  </div>
</template>

<script lang="ts" setup name="MyHeader">
import { computed } from "@vue/runtime-core";
import { useStore } from "vuex";
import { langType } from "@/enum/options";
import { useI18n } from "vue-i18n";

const store = useStore();
// 改变语言
const language = computed(() => store.state.language);
const { locale } = useI18n();
const handleCommand = (value: string) => {
  locale.value = value;
  store.commit("CHANGE_LANGUAGE", value);
};
</script>

<style lang="less">
.header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
}
</style>

七、Element-Plus 国际化配置

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

<!-- \src\App.vue -->
<template>
  <el-config-provider :locale="locale">
    <router-view />
  </el-config-provider>
</template>

<script lang="ts" setup name="App">
import { computed } from "vue";
import { useStore } from "vuex";
// 导入 Element Plus 语言包
import zhCn from "element-plus/lib/locale/lang/zh-cn";
import en from "element-plus/lib/locale/lang/en";

const store = useStore();
const language = computed(() => store.state.language);
const lang = {
  zhCn,
  en,
};
const locale = computed(() => lang[language.value]);
</script>

<style lang="less"></style>

 效果如下：