px2rem 第三方库实践

  Vue 项目搭配lib-flexible 和 px2rem 来实现移动端项目的适配应该是很多公司目前采用的一种移动端适配解决方案。这种方法的常规webpack配置百度上有很多文章都有教程，大家可以按照那些教程一步一步配置。我在这里就不多说了，如果大家实在懒得找可以查看这篇文章：传送门。

但是采用px2rem插件有两个需要注意的地方：

1. 对于项目内的行内样式它是无法将px单位自动转化为rem的。

请看下面的例子:

<mu-form-item label="密码" class='item' style='margin-top: 36px;'>
    <mu-text-field type="password" v-model="form.psd"></mu-text-field>
</mu-form-item>复制代码

项目编译之后margin-top:36px是不会自动转化为rem表示的。

2. 如果项目使用了第三方库，那么第三库的样式将会受影响。

关于这个问题我自己百度查阅了一些资料，但是感觉没有找到特别仔细的教程，因此我自己个人总结了一下，希望能帮到大家。目前关于这个问题大概有三种解决方案：

1. 将第三方库的CSS文件拷贝出来，然后将拷贝出来的文件里面的px全部替换为大写的PX。然后引用修改后的文件。
   
2. 同样将第三方库的CSS文件拷贝出来，然后手动将拷贝出来文件里面以px为单位的数值全部*2.然后引用修改后的文件。详细的可以查看这篇文章：传送门。
3. 个人感觉是目前比较好的一个解决方案。通过postcss-px2rem-exclude插件，exclude掉node_modules里面的文件。具体的步骤大家可以跟着下面的内容：

如果项目之前有用px2rem,大家可以先卸载掉px2rem插件和删掉对应的配置代码

npm  uninstall postcss-px2rem --save-dev复制代码

安装postcss-px2rem-exclude

npm  install postcss-px2rem-exclude --save复制代码

配置postcss-px2rem-exclude

如果大家是用vue-cli手脚架的话，请找到'../build/vue-loader.conf.js'。然后将里面的配置修改成如下：

exclude里面大家可以将文件目录自行修改为需要的文件目录。

重启项目，完成收工

以上就是个人的一些见解，如果有不对的地方欢迎指正。希望这篇文章能帮到大家，谢谢~~

转载于:https://juejin.im/post/5c2db1efe51d456ee162d18e