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

版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。

本文链接： https://blog.csdn.net/qq_36710522/article/details/99409054

由于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 文件也会被编译进去，就实现了转换。