Vue rem适配 PC端 （vue2 + vue3）

1. 第一步

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

2. 第二步

// 在 main.js 引用
import 'lib-flexible'
// 在 node_modules / lib-flexible / flexible.js 作以下修改
// 找见这个函数， 把 540 改成 width
function refreshRem(){
     var width = docEl.getBoundingClientRect().width;
     if (width / dpr > 540) {
          // width = 540 * dpr;
          width = width * dpr;  // 把 540 改成 width
      }
      var rem = width / 10;
      docEl.style.fontSize = rem + 'px';
      flexible.rem = win.rem = rem;
 }

3. 第三步 （重启项目生效）

// 在vue.config.js 添加以下代码 ；如果没有就新建 vue.config.js，与package.json同级
module.exports = {
    css: {
        loaderOptions: {
            css: {},
            postcss: {
                plugins: [
                    require("postcss-px2rem")({
                        remUnit: 192  // 如果设计稿是1920 这里就是192
                    })
                ]
            }
        }
    },
};

4. 解决第三方组件库样式变小

npm  install postcss-px2rem-exclude --save

// package.json
 "postcss": {
    "plugins": {
      "autoprefixer": {},
      "postcss-px2rem-exclude": {
        "remUnit": 192, // 如果设计稿是1920 这里就是192
        "exclude": "/node_modules|floder_name/i"
      }
    }
  }

// vue.config.js
 css: {
    loaderOptions: {
      postcss: {
        plugins: [
          require('postcss-px2rem-exclude')({
            remUnit: 192, // 如果设计稿是1920 这里就是192
            exclude: /node_modules|folder_name/i,
          }),
        ]
      }
    }
  },

vue3 + vite rem适配 ：原文 https://blog.csdn.net/IT_iosers/article/details/125849551

npm i postcss-pxtorem  
npm i autoprefixer
npm i -S amfe-flexible

// postcss.config.cjs  注意这里是cjs，不是js
module.exports = {
    plugins: {
        autoprefixer: {
            overrideBrowserslist: [
                "Android 4.1",
                "iOS 7.1",
                "Chrome > 31",
                "ff > 31",
                "ie >= 8",
                "last 10 versions" // 所有主流浏览器最近10版本用
            ],
            grid: true
        },
        "postcss-pxtorem": {
            rootValue: 192, // 设计稿宽度的1/ 10
            propList: ["*", "!border"], // 除 border 外所有px 转 rem
            selectorBlackList: [".el-"] // 过滤掉.el-开头的class，不进行rem转换
        }
    }
};

// main.js 引入
import "amfe-flexible/index.js";