vue 移动端适配【lib-flexible + postcss-px2rem-exclude】以及引入移动端UI库大小问题解决

优点

1.不需要自己编写js计算，引入lib-flexible
2.不需要手动计算rem值，不需要改变px写法，postcss-px2rem-exclude 会自动将px计算成rem

1.下载 lib-flexible + postcss-px2rem-exclude

npm install lib-flexible --save-dev
npm install postcss-px2rem-exclude  --save-dev

2.在main.js引入 lib-flexible

// main.js
import 'lib-flexible'

3.package.json配置postcss-px2rem-exclude (如果没有引用第三方ui库的话没问题)

// package.json
{
  "name": "demo",
  "version": "1.0.4",
  "private": true,
  "scripts": {
    "dev": "vue-cli-service serve --mode dev",
    "serve": "vue-cli-service serve",
    "build": "vue-cli-service build --mode build",
    "pre": "vue-cli-service build --mode pre",
    "test": "vue-cli-service build --mode test"
  },
  ...
  "postcss": {
    "plugins": {
      "autoprefixer": {},
      "postcss-px2rem-exclude": {
        "remUnit": 75,  // 如果UI是750px的话
        "exclude": "/node_modules|floder_name/i" // --->此处有问题
      }
    }
  }
}

4.引入vant等UI库大小出现问题

是因为上边配置的exclude中的正则有问题，这样写的话是一个字符串，但是json文件中又不能写正则，所以新建一个文件来写postcss的相关配置
这样才能正常忽略node_modules中的css文件
在根目录新建postcss.config.js

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

移动端适配 还有其他很多方案，rem+vm 纯 css
js计算rem的插件除了postcss-px2rem-exclude也有很多其他类似的