vant 离线显示图标 vant 列表

Vant 简介

移动端UI库

官网地址：
https://youzan.github.io/vant

遇到的问题

生成的app，在手机没有网络的时候，图标加载失败。显示的是一个带 × 的方块，功能显示不正常。

解决办法

https://youzan.github.io/vant/#/zh-CN/icon

使用本地字体文件
Icon 组件默认引用有赞 CDN 提供的字体文件，并通过网络下载。如果需要在项目中使用本地字体文件，请引入下面的 CSS 文件，并在项目中配置url-loader

实践证明：导入两次 css 样式即可

import 'vant/lib/index.css';
import 'vant/lib/icon/local.css';

package.json 中写的是：

  "dependencies": {
    "vant": "^1.1.16",
    "vue": "^2.5.2",
    "vue-router": "^3.0.1"
  },

实际上，下载的 vant 版本是：1.6.28。 说明 ^是以上版本都可以的

其他疑问的地方

有时间再详细研究：

import ‘vant/lib/icon/local.css’;

1. import 找的是哪些目录？

2. 文中提到的 “配置url-loader ” 是什么意思呢？