组件中单位都是px，为了兼容必须使用rpx，可以采用vue-cli2.0创建的项目npm run build打包来转换。（创建vue项目这里就不再做介绍了）

这里以WeUI为例

1.将下载好的ui组件放进vue项目的static中

image.png

2.安装px2rpx

文档：@megalo/px2rpx

npm i @megalo/px2rpx -S

3.打开build/webpack.dev.conf.js和build/webpack.prod.conf.js将下面代码引入（2个文件都必须引入）

const Px2rpx = require('@megalo/px2rpx')
const px2rpxIns = new Px2rpx({ rpxUnit: 0.5 })

image.png

4.把build/webpack.dev.conf.js和build/webpack.prod.conf.js文件里new CopyWebpackPlugin片段进行修改（2个文件都必须修改）

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

修改为

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: ['.*']
      }
    ])

5.终端中在项目文件中npm run build，转换好的文件在dist/static里面，放到小程序中引用，结束。

image.png

6这是本人创建的项目打包好的weui ，大家可以下载下来先npm install 在把自己需要转换的文件放进static，按照上述步骤进行转化。

链接：https://pan.baidu.com/s/1N018yUy0HggoTXBwnNMcXg
提取码：ytux

原文作者：匆匆那年_海，博客主页：https://www.jianshu.com/u/910c0667c515
95后前端汉子，爱编程、优秀、聪明、理性、沉稳、智慧的程序猿一枚。