Vue3后台管理系统（七）Element-Plus国际化_element plus国际化

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

一、配置：

在src/store/modules文件夹下新建app文件，然后在app文件夹下新建index.ts内容如下

// src/store/modules/app/index.ts
import {
    getSidebarStatus,
    setSidebarStatus,
    getSize,
    setSize,
    setLanguage
} from '@/utils/localStorage';
import {defineStore} from 'pinia';
import {getLanguage} from '@/lang';
import {computed, reactive, ref} from 'vue';
import {useStorage} from '@vueuse/core';
 
// Element Plus 语言包
import zhCn from 'element-plus/es/locale/lang/zh-cn';
import en from 'element-plus/es/locale/lang/en';
 
export enum DeviceType {
    mobile,
    desktop
}
 
export enum SizeType {
    default,
    large,
    small
}
 
// setup
export const useAppStore = defineStore('app', () => {
    // state
    const device = useStorage<string>('device', 'desktop');
    const size = ref(getSize() || 'default');
    const language = ref(getLanguage());
    const sidebar = reactive({
        opened: getSidebarStatus() !== 'closed',
        withoutAnimation: false
    });
 
    const locale = computed(() => {
        if (language?.value == 'en') {
            return en;
        } else {
            return zhCn;
        }
    });
 
    // actions
    function toggleSidebar(withoutAnimation: boolean) {
        sidebar.opened = !sidebar.opened;
        sidebar.withoutAnimation = withoutAnimation;
        if (sidebar.opened) {
            setSidebarStatus('opened');
        } else {
            setSidebarStatus('closed');
        }
    }
 
    function closeSideBar(withoutAnimation: boolean) {
        sidebar.opened = false;
        sidebar.withoutAnimation = withoutAnimation;
        setSidebarStatus('closed');
    }
 
    function openSideBar(withoutAnimation: boolean) {
        sidebar.opened = true;
        sidebar.withoutAnimation = withoutAnimation;
        setSidebarStatus('opened');
    }
 
    function toggleDevice(val: string) {
        device.value = val;
    }
 
    function changeSize(val: string) {
        size.value = val;
        setSize(val);
    }
 
    function changeLanguage(val: string) {
        language.value = val;
        setLanguage(val);
    }
 
    return {
        device,
        sidebar,
        language,
        locale,
        size,
        toggleDevice,
        changeSize,
        changeLanguage,
        toggleSidebar,
        closeSideBar,
        openSideBar
    };
});

二、全局化

修改App.vue为：

<!--src/App.vue-->
<script setup lang="ts">
import { ElConfigProvider } from 'element-plus';
import { useAppStore } from '@/store/modules/app';
const appStore = useAppStore();
</script>
 
<template>
  <el-config-provider :locale="appStore.locale" :size="appStore.size">
    <router-view />
  </el-config-provider>
</template>