vue-cli3.0结合lib-flexiblepx2rem实现移动端适配，完美解决第三方ui库样式变小问题

Posted 2020-11-22 jianxian

公司最近做的一个移动端项目从搭框架到前端开发由我独立完成，以前做移动端适配用的媒体查询，这次想用点别的适配方案，然后就采用了vue-cli3.0结合lib-flexible、px2rem实现移动端适配的方案，开发过程中也遇到一些坑，自己选的方案自己填坑吧。以下记录我的项目框架搭建及填坑方案。

搭建可以参考我的另一篇文章vue-cli 3.0 搭建项目流程，这里就不再另外说明了。下面说明项目搭建成功后的适配方案。

第一部分：项目中引入lib-flexible

一、项目中安装lib-flexible

npm install lib-flexible --save

二、在项目的入口main.js文件中引入lib-flexible

import ‘lib-flexible‘

第二部分：使用postcss-px2rem自动将css中的px转换成rem

一、安装postcss-px2rem (一定看完文章再安装不然你会哭o(╥﹏╥)o)

npm install postcss-px2rem --save-dev

二、项目配置postcss

项目开始我是在vue.config.js（项目创建完初始是没有这个js文件的，需要自己手动创建）中配置的，上代码

module.exports = {
    css: {
        loaderOptions: {
          postcss: {
            // 这是rem适配的配置  注意： remUnit在这里要根据lib-flexible的规则来配制，如果您的设计稿是750px的，用75就刚刚好。
             plugins: [
              require("postcss-px2rem")({
                remUnit: 75
          })
        ]
      }
    }
}

初始的适配方案就完成了，然后可以直接在css或.vue文件中写已px为单位的样式了，到浏览器会自动转为rem。

因为前期项目安排不是太赶，ui给的设计图也相对简单，所以自己写了按钮组件之类的，适配还挺好，觉得自己棒棒哒~

直到ui的后续设计图出现时间插件，然后就引入了vant的组件库。

放了一个简单的cell组件，npm run serve项目跑起来，我想哭o(╥﹏╥)o，组件中的样式都变小了，F12看了一下果然组件的样式也都被转换成了rem。

问题

变小的主要原因是第三库 css一依据 data-dpr="1" 时写的尺寸

<meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">

这时我们使用的flexible引入时 data-dpr不是一个写死了的，是一个动态的；就导致这个问题

然后就各种查解决方案，网络上给的解决方案一个是改写第三方库的样式，还有一个就是让flexible不编译第三方库的文件（忽略ui组件库的样式文件）。

解决方案一：

将第三方组件的css文件复制出来第三方库的css代码px统一扩大2倍，或者用全局替换将px替换为px/*no*/。我觉的这个方案不太好没有采用，具体操作可以参考以下两篇文章：https://segmentfault.com/a/1190000014575890 和 https://blog.csdn.net/weixin_42464312/article/details/82769805。

解决方案二：

使用postcss-px2rem-exclude，网上好多说用这个方法不起作用，经过一个下午的折腾才发现是使用方法不对，我的错误方法就不跟你们说了，直接来正确的。

首先，需要卸载项目中的postcss-px2rem。

npm  uninstall postcss-px2rem --save-dev

其次，安装postcss-px2rem-exclude

npm  install postcss-px2rem-exclude --save

最后是配置exclude选项，需要注意的是这个配置在vue.config.js中式不起作用的，如图。

正确的配置位置是项目根目录下的postcss.config.js文件，如果你的项目没有生成这个独立文件，就需要在你的package.js里设置。

postcss.config.js

module.exports = {
  plugins: {
    autoprefixer: {},
    "postcss-px2rem-exclude": {
      remUnit: 75,
      exclude: /node_modules|folder_name/i
    }
  }
};

package.json

"postcss": {
    "plugins": {
      "autoprefixer": {},
      "postcss-px2rem-exclude":{
          "remUnit": 75,
          "exclude":"/node_modules|floder_name/i"
      }
    }
  },

ok，完成。

以上就是我这个项目的填坑经历，希望对你有用，能少走点弯路 o(*^＠^*)o

 

再补充：

最近在用vuecli3.x搭建项目    安装了postcss-px2rem但是影响了ui组件的样式，网上的方法都试过，总结下

1. postcss-px2rem不能忽略指定文件   需要安装postcss-px2rem-exclude（安装前需要先卸载postcss-px2rem）

    npm uninstall postcss-px2rem

    npm i postcss-px2rem-exclude -D
2.  在项目搭建的时候要选择配置文件的位置了。

     对于 Babel 、 PostCSS 等，都可以有自己的配置文件： .babelrc 、 .postcssrc 等等

     或者也可以把配置信息放在 package.json 里面

3. 要是选择独立配置文件的 直接在根目录下  postcss.config.js内修改

exclude  就是要忽略的文件    

 

 

4. 最坑的就是你选的配置信息都放在 package.json 里面

我参照网上的方法 把配置放在package.json  根本无效

 

 

之后我查看了postcss-px2rem-exclude 的源码，发现在package.json中加入的配置传过去的是  "/node_moudules/i"是字符串，并不是正则表达式，所以根本无效，我自己试了2中方法均有效

 

 

第一种： 就是删除package.json 中关于postcss的配置

                然后在根目录下新建postcss.config.js，把package.json中的postcss配置放到postcss.config.js

                同3  

                module.exports = {

                  plugins: {

                        autoprefixer: {},

                        "postcss-px2rem-exclude": {

                              "remUnit": 32,

                              "exclude": /node_modules/i

                        }

                  }

                }

第二种  就是修改postcss-px2rem-exclude 源码

/node_modules/postcss-px2rem-exclude/lib/index.js 文件 增加如下内容，即可

 

 

 

 

 

在移动端开发中，常常会用到rem相对单位来做自适应。最常用到一种方法就是使用lib-flexible和px2rem来做到自动转换px单位。具体方法参考上一篇文章（px2rem-loader（Vue:将px转化为rem，适配移动端））。

相对缺陷

但是，这个方法是有缺陷的，当引入第三方UI库时，会发现第三方的UI库的样式也自动转化成rem了。所以样式会变小。

 

 

 

 

 

 

解决方法：

其实解决方法很简单，让其不转化成rem就可以了。但是怎么做到呢，请往下看。

使用postcss-px2rem-exclude，网上好多说用这个方法不起作用，经过一个下午的折腾才发现是使用方法不对，我的错误方法就不跟你们说了，直接来正确的。

首先，需要卸载项目中的postcss-px2rem。

npm uninstall postcss-px2rem --save-dev

其次，安装postcss-px2rem-exclude

npm install postcss-px2rem-exclude --save

最后是配置exclude选项，需要注意的是这个配置在vue.config.js中式不起作用的，如图。

 

 

 

正确的配置位置是项目根目录下的postcss.config.js文件，如果你的项目没有生成这个独立文件，就需要在你的package.js里设置。

postcss.config.jsmodule.exports= {

  plugins: {

    autoprefixer: {},

    "postcss-px2rem-exclude": {

      remUnit: 75,

      exclude: /node_modules|folder_name/i

    }

  }

};

package.json

"postcss": {

    "plugins": {

      "autoprefixer": {},

      "postcss-px2rem-exclude":{

          "remUnit": 75,

          "exclude":"/node_modules|floder_name/i"

      }

    }

  },

最后别忘了把之前配置过的信息删掉。在build-utils.js下，如图：

 

 

 

 

 

 

ok，完成。

以上就是我这个项目的填坑经历，希望对你有用，能少走点弯路 o(*^＠^*)o

 

 

 

 

 

.