使用 CDN 加载图标

Vuetify 默认使用 @mdi 图标库,该库非常强大,图标种类众多,但是因为太过于丰富,所以整个图标库接近 1M,在线上环境中,如果服务器带宽不足,那么将会长时间加载该库,为了解决这个问题,在互联网应用中,我们只需要将该库使用公共 CDN 加载即可。

官方文档导航:

Vue CLI 项目设置

src/plugins/vuetify.js
// 确保没有这一行,如果有,请删除
import '@mdi/font/css/materialdesignicons.css';

然后找到项目主入口静态文件:

public\index.html
<head>
...
<link
rel="stylesheet"
href="https://cdn.jsdelivr.net/npm/@mdi/font@latest/css/materialdesignicons.min.css"
/>
</head>

检查 package.json 如果有 @mdi/font 这个库,键入以下命令移除:

shell
npm uninstall @mdi/font
Last updated on by AGDholo