vue-cli3中vant字体库改为本地引入

内网项目无法引用外部cdn资源，所以需要将vant的字体库改为本地引入
相关插件："less-loader": "^7.0.0"，"vant": "^2.10.3",

1. 确保vant的样式是按需加载且直接引用less文件

// babel.config.js
  plugins: [
    ['import', {
      libraryName: 'vant',
      libraryDirectory: 'es',
      style: (name) => `${name}/style/less`,
    }, 'vant']

2. vue.config.js配置

const path = require('path');
const fs = require('fs');
module.exports = {
  // ...
  css: {
    loaderOptions: {
      less:{
        additionalData: (content, loaderContext) => {
          const { resourcePath, rootContext } = loaderContext;
          const relativePath = path.relative(rootContext, resourcePath);
          // 如果是windows，这边地址应该为'node_modules\\vant\\es\\icon\\index.less'
          if(relativePath === 'node_modules/vant/es/icon/index.less') {
            // 获取@vant/icons/src/index.less中的less文件
            const iconIndexLess = fs.readFileSync('node_modules/@vant/icons/src/index.less').toString()
            // 将获取的内容中，字体库的地址改为本地引用
            const newIconIndexLess = iconIndexLess.replace(/https:\/\/img.yzcdn.cn\/vant\//g, '~@vant/icons/src/')
            // 将icons/src/index.less中对于@vant/icons/src/index.less的引入替换为刚刚更新的newIconIndexLess
            return content.replace(`@import '~@vant/icons/src/index.less';`, newIconIndexLess)
          }
          return content
        }
      }
    }
  }
  // ...
}

好了现在重新启动下项目，看看是不是改变了