vue-cli3.0搭建移动端项目的适配问题以及解决第三方组件样式受影响的问题

前言：

        我们之前使用的解决移动端适配常用的方法是 媒体查询+rem,em，这种适合小的项目，而且每次rem值计算也太麻烦了点，这里列出现在常用的另一种方法就是：lib-flexible 和 postcss-px2rem-exclude来完美的解决适配问题。

步骤一：安装lib-flexible - 适配插件，自动添加头部 meta

1 安装
npm install lib-flexible --save
2 main.js中
import 'lib-flexible'

lib-flexible会自动在html的head中添加一个meta name="viewport"的标签，
同时会自动设置html的font-size为屏幕宽度除以10，
也就是1rem等于html根节点的font-size。

注意：
    1.检查一下html文件的head中，如果有 meta name="viewport"标签，需要将他注释掉，
因为如果有这个标签的话，lib-flexible就会默认使用这个标签。而我们要使用lib-flexible
自己生成的 meta name="viewport"来达到高清适配的效果。

    2.因为html的font-size是根据屏幕宽度除以10计算出来的，所以我们需要设置页面的
最大宽度是10rem

看图示：

步骤二：安装postcss-px2rem-exclude- 转换插件，自动把页面style中的px转换为rem(注意js+外部引入的css不能被转换，不希望被转成rem，只要在后面写上注释 /* no*/)

***解决第三方组件样式受影响的问题，在exclude里面忽略node_modules

1 安装 
npm install postcss-px2rem-exclude --save

2 配置-根目录下找到  postcss.config.js  这个文件，里面加入内容

module.exports = {
  plugins: {
    autoprefixer: {},
    "postcss-px2rem-exclude": {
      remUnit: 75,
      exclude: /node_modules|folder_name/i  //这里要忽略，不然第三方引入的组件样式会被影响
    }
  }
}

看图示：

最后：运行项目 npm run serve

   打开以后看控制台，已经转换成rem了

  

参考资源路径：

            https://blog.csdn.net/u012878818/article/details/88190907

           https://www.cnblogs.com/qianxiaojing/p/10334881.html

            https://msd.misuland.com/pd/10543575353311186?page=1