vue移动端适配方案

一、安装postcss-px-to-viewport插件

1.使用npm安装

$ npm install postcss-px-to-viewport --save-dev

2.或者使用yarn安装

$ yarn add -D postcss-px-to-viewport

二、配置适配插件的参数

{
      unitToConvert: 'px',            //需要转换的单位
      viewportWidth: 750,           //设计稿的宽度
      unitPrecision: 5,                 //单位转换后保留的精度
      propList: ['*'],         //能转化为vw的属性列表，默认'*'
      viewportUnit: 'vw',              //转换后的视口单位
      fontViewportUnit: 'vw',      //字体使用的视口单位
      selectorBlackList: [],            //忽略的css选择器
      minPixelValue: 1,                //最小的转换数值
      mediaQuery: false,             //是否开启媒体查询
      replace: true,     //是否直接更换属性值，而不添加备用属性
      exclude: [],          //忽略某些文件夹下的文件或特定文件
      landscape: false,
      landscapeUnit: 'vw',  //横屏时使用的单位
      landscapeWidth: 750   //横屏时使用的视口宽度
  }

在项目的根目录下新建一个postcss.config.js配置文件，并且在配置文件里写入：

module.exports = {
  plugins: {
    ...
    'postcss-px-to-viewport': {
          "viewportWidth": 750,
          "minPixelValue": 1,
          "mediaQuery": false,
          "selectorBlackList": ["van", "el"],
          "landscape": true,
          "landscapeUnit": "vw",
          "landscapeWidth": 2048
    }
  }}

说明下几个重要参数的使用：

1. viewportWidth 必填属性，根据UI提供的设计稿宽度定义
2. minPixelValue 必填属性，一般为1
3. selectorBlackList 选填属性，通常情况下，可以忽略一些第三方的UI样式，否则viewport将改变第三方UI样式库的单位值
4. mediaQuery 选填属性，是否开启媒体查询
5. landscape 选填属性，是否添加根据 landscapeWidth 生成的媒体查询条件 @media (orientation: landscape)
6. landscapeWidth 选填属性，横屏时使用的视口宽度

适配存在的问题点：

1. 如果产品的需求是PC端查看移动端网页时，需要居中显示。
   由于postcss-px-to-viewport的原理是，根据设计稿，把所有试图单位的宽高设置成vw单位，也就是一个比例，那么所有的设备传真实像素进来的时候，会得出真实的px值。
   所以我们PC全屏时，看到的效果是移动端网页充满PC的屏幕宽度，这时候，landscape就可以帮我们解决这个问题了。

 "landscape": true,
  "landscapeUnit": "vw",
  "landscapeWidth": 2048

landscape参数的作用（上面有解释）。

2. 如果我们引用了第三方UI库，例如element-ui、vant等热门ui被压缩
         selectorBlackList帮我们处理了这个问题。
         只需要将第三方ui的前缀加入到selectorBlackList数组中，例如

"selectorBlackList": ["van", "el"]

那么postcss-px-to-viewport自动排除这些带前缀的组件

3.到这里配置文件以及依赖包就安装完了，但是小伙伴们发现运行后项目px单位并没有转化为vw,而且上面的配置根本就不起作用？这到底是什么原因引起的呢？起始我一开始也很纳闷，一直在查资料也没有相关的文章有说明；后来我在package.json这个文件里找到了解决的方法，

  "eslintConfig": {
    "root": true,
    "env": {
      "node": true
    },
    "extends": [
      "plugin:vue/essential",
      "eslint:recommended"
    ],
    "rules": {},
    "parserOptions": {
      "parser": "babel-eslint"
    }
  },
  "postcss": {
    "plugins": {
      "autoprefixer": {}
    }
  },
  "browserslist": [
    "> 1%",
    "last 2 versions"
  ]
}

在package.json里找到下面的这一段配置并且删掉

 "postcss": {
    "plugins": {
      "autoprefixer": {}
    }
  },

重新运行yarn serve就可以了