mpvue中引用Vant-weapp时，没有把原来的px转换成rpx问题解决办法（踩坑记录）

mpvue中引用Vant-weapp时，没有把原来的px转换成rpx问题解决办法（踩坑记录）

 mpvue vant-weapp

由于node_modules不会编译到dist目录中，所以使用npm安装的vant-weapp还需要将仓库中的vant文件夹复制到你的项目目录static下，至此问题就出在放在static文件夹中的文件打包的时候不会被webpack打包进去，使用的时候还是会按照vant-weapp固有的px单位，如果每次引用一个组件都要修改的话太麻烦，所以也可以修改下webpack配置文件实现编译转换：
修改文件如下图：

修改代码为（在文件中搜索关键词CopyWebpackPlugin）：
修改前：

new CopyWebpackPlugin([
{
from: path.resolve(__dirname, '../static'),
to: config.build.assetsSubDirectory,
ignore: ['.*']
}
])

修改后（增加一层判断）：

var Px2rpx = require('px2rpx');
var px2rpxIns = new Px2rpx({ rpxUnit: 0.5 });
new CopyWebpackPlugin([
{
from: path.resolve(__dirname, '../static'),
to: config.build.assetsSubDirectory,
transform(content, path) {
if (path.endsWith('.wxss')) {
return px2rpxIns.generaterpx(content.toString(), 1)
} else {
return content
}
},
ignore: ['.*']
}
]),

这样子配置就可以实现static里面的 .wxss 文件也会被编译进去，就实现了转换。
————————————————
版权声明：本文为CSDN博主「你好！YOYO」的原创文章，遵循CC 4.0 BY-SA版权协议，转载请附上原文出处链接及本声明。
原文链接：https://blog.csdn.net/qq_36710522/article/details/99409054

标签：mpvue,Vant,rpx,weapp,修改,static,path,vant
来源： https://www.cnblogs.com/webSnow/p/15292420.html