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

由于node_modules不会编译到dist目录中,所以使用npm安装的vant-weapp还需要将仓库中的vant文件夹复制到你的项目目录static下,至此问题就出在放在static文件夹中的文件打包的时候不会被webpack打包进去,使用的时候还是会按照vant-weapp固有的px单位,如果每次引用一个组件都要修改的话太麻烦,所以也可以修改下webpack配置文件实现编译转换:
修改文件如下图:
mpvue中引用Vant-weapp时,没有把原来的px转换成rpx问题解决办法(踩坑记录)_第1张图片
修改代码为(在文件中搜索关键词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 文件也会被编译进去,就实现了转换。

你可能感兴趣的:(mpvue中引用Vant-weapp时,没有把原来的px转换成rpx问题解决办法(踩坑记录))