部署后Vuetify+Vue3中MDI图标显示异常的解决方法咨询

仅在生产环境下出现以下问题：标签页打开一段时间后，点击菜单项切换应用内路由时路由失效，无法跳转到目标页面；刷新页面后MDI图标变为奇怪符号，普通刷新无法恢复，仅强制刷新可恢复，其余场景图标显示正常。

想咨询是否有开发者遇到相同问题并找到了解决方案？感谢解答。

已执行的操作 #

1. Vuetify配置：

import '@mdi/font/css/materialdesignicons.css';
import '@/styles/main.scss';
import '@/styles/style.scss';

import { createVuetify } from 'vuetify';
import { aliases, mdi } from 'vuetify/iconsets/mdi';
import { fa } from 'vuetify/iconsets/fa';

icons: {
        defaultSet: 'mdi',
        aliases,
        sets: {
            mdi,
            fa
        }
    },

2. 打包优化：

rollupOptions: {
            output: {
                manualChunks(id)
                {
                    if (id.includes('node_modules'))
                    {
                        if (id.includes('vuetify/lib/iconsets/mdi.mjs'))
                        {
                            return 'mdi';
                        }

                        if (id.includes('vuetify'))
                        {
                            return 'vuetify';
                        }

                        if (id.includes('@fortawesome') || id.includes('@mdi'))
                        {
                            return 'fonts';
                        }

                        return 'vendor';
                    }
                }
            }
        }

3. 已添加UTF-8元标签

内容的提问来源于stack exchange，提问作者Gaga M