前端使用vuetify库UI时，页面加载很慢的问题解决方法

玩代码的老秦

已于 2022-05-26 14:15:44 修改

阅读量1.1k

点赞数

文章标签： vue.js javascript

于 2022-05-26 09:43:33 首次发布

本文链接：https://blog.csdn.net/sharleen84/article/details/124978729

版权

当vue的ui使用了vuetify，在生产环境后期出现大白屏，加载很长时间后，才出来。进控制台，有库出现404丢失情况，如下图：

查看vuetify的引入情况，如下：

import Vue from 'vue';
import Vuetify from 'vuetify/lib/framework';

Vue.use(Vuetify);

export default new Vuetify({
    icons: {
        iconfont: 'mdiSvg', // 'mdi' || 'mdiSvg' || 'md' || 'fa' || 'fa4' || 'faSvg'
    }
});

反复调试，对比之前正常项目发现，问题出现在第二行，对vuetify的引入上，这个引入方式是cdn方式，会引入线上最新文件，一旦出现官网问题，就会失败出现404。改进方式就是直接引入本地库，改正如下，问题解决。加载正常。

import Vue from 'vue';
import Vuetify from 'vuetify';

Vue.use(Vuetify);

再次出现加载缓慢的情况，多方查找资料发现，是在public/index.html中引入了官方css文件导致。

    <title>会员中心</title>
    <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Roboto:100,300,400,500,700,900">
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@mdi/font@latest/css/materialdesignicons.min.css">
  </head>

决定先删除这两行引用。竟然也正常了。