nuxt+vuetify项目图标无法显示

默认的远程加载图标

图标本质上就是字体，而vuetify默认从远程地址拉取css和字体文件所以在离线环境下必须使用本地加载

默认的加载图标的方式如下

<link data-n-head="1" rel="stylesheet" type="text/css"
      href="https://cdn.jsdelivr.net/npm/@mdi/font@latest/css/materialdesignicons.min.css">

使用离线方式加载

1.在nuxt .config.js中head.link中添加如下配置，再进行编译

head: {


link: [

      {
        rel: 'stylesheet',
        href: '/css/materialdesignicons.min.css'
      }


]

}

2.下载图标文件

https://www.jsdelivr.com/package/npm/@mdi/font

将其中的 css 文件夹和 fonts 文件夹移动到编译后的根目录

再进行部署即可访问