App.vue

<template>
    <a-config-provider :locale="locale" :get-popup-container="popContainer">
        <router-view />
    </a-config-provider>
</template>

<script>
import { enquireScreen } from './utils/commonUtil';
import { mapState, mapMutations } from 'vuex';
import { getI18nKey } from '@/utils/routerUtil';
import { changeThemeColor } from '@/utils/themeUtil';

export default {
    name: 'App',
    data() {
        return {
            locale: {},
        };
    },
    created() {
        this.setHtmlTitle();
        this.setLanguage(this.lang);
        enquireScreen(isMobile => this.setDevice(isMobile));
    },
    mounted() {},
    watch: {
        lang(val) {
            this.setLanguage(val);
            this.setHtmlTitle();
        },
        $route() {
            this.setHtmlTitle();
        },
        'theme.mode': function(val) {
            let closeMessage = this.$message.loading(`您选择了主题模式 ${val}, 正在切换...`);
            changeThemeColor(this.theme.color, val).then(closeMessage);
        },
        'theme.color': function(val) {
            let closeMessage = this.$message.loading(`您选择了主题色 ${val}, 正在切换...`);
            changeThemeColor(val, this.theme.mode).then(closeMessage);
        },
        layout: function() {
            window.dispatchEvent(new Event('resize'));
        },
    },
    computed: {
        //setting = mapStore.name
        ...mapState('settingModule', ['layout', 'theme', 'lang']),
    },
    methods: {
        ...mapMutations('settingModule', ['setDevice']),

        setLanguage(lang) {
            this.$i18n.locale = lang;
            switch (lang) {
                case 'zh_CN':
                    this.locale = require('ant-design-vue/es/locale-provider/zh_CN').default;
                    break;
                case 'en_US':
                    this.locale = require('ant-design-vue/es/locale-provider/en_US').default;
                    break;
                default:
                    this.locale = require('ant-design-vue/es/locale-provider/en_US').default;
                    break;
            }
        },
        setHtmlTitle() {
            const route = this.$route;
            const key =
                route.path === '/' ? 'home.name' : getI18nKey(route.matched[route.matched.length - 1].path);
            document.title = process.env.VUE_APP_NAME + ' | ' + this.$t(key);
        },
        popContainer() {
            return document.getElementById('popContainer');
        },
    },
};
</script>