内网项目无法引用外部cdn资源，所以需要将vant的字体库改为本地引入
相关插件："less-loader": "^7.0.0"，"vant": "^2.10.3",
- 确保vant的样式是按需加载且直接引用less文件
// babel.config.js
plugins: [
['import', {
libraryName: 'vant',
libraryDirectory: 'es',
style: (name) => `${name}/style/less`,
}, 'vant']
- 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
}
}
}
}
// ...
}
好了现在重新启动下项目，看看是不是改变了
效果
