內(nèi)網(wǎng)項目無法引用外部cdn資源，所以需要將vant的字體庫改為本地引入
相關(guān)插件："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()
// 將獲取的內(nèi)容中，字體庫的地址改為本地引用
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
}
}
}
}
// ...
}
好了現(xiàn)在重新啟動下項目，看看是不是改變了
效果
