Vue移动端适配并解决rem影响第三方ui库样式问题

Vue移动端适配并解决rem影响第三方ui库样式问题

一、项目中安装lib-flexible

npm install lib-flexible --save

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

import 'lib-flexible'

三、安装postcss-px2rem-exclude

npm install postcss-px2rem-exclude --save

四、配置 postcss-px2rem-exclude

1.在项目的根目录下找到文件.postcssrc.js，在里面添加如下代码

module.exports = {
  "plugins": {
    // to edit target browsers: use "browserslist" field in package.json
    "postcss-import": {},
    "autoprefixer": {},
    "postcss-px2rem-exclude": {  // 添加的代码
      remUnit: 75,
      exclude: /node_modules|folder_name/i // 忽略node_modules目录下的文件
    }
  }
}