因VM上使用的是内网,访问不了Google,所以vuetify中icon是显示不正常的,显示默认的text,如下:

vuetify-icon图标显示不正常_图标

而正常的应该如下:

vuetify-icon图标显示不正常_图标_02

如下提供了两种方法:

方法一:

​(可以访问Google的时候可以使用此方法-线上的)​

  • 在index.html中引入
<link href="https://fonts.googleapis.com/css?family=Material+Icons" rel="stylesheet">
方法二:

​(不可以访问Google的时候可以使用此方法-本地的)​

​(请注意,这不是官方的Google存储库,可能无法接收更新)​

  • 首先安装一个依赖
npm install material-design-icons-iconfont -D
  • 在main.js中引入
import 'material-design-icons-iconfont/dist/material-design-icons.css'

具体参考

​https://github.com/vuetifyjs/​

vuetify的icons的文档请参考:​​https://vuetifyjs.com/compone​

觉得有帮助的小伙伴右上角点个赞支持下~

扫描上方二维码关注我的订阅号~