1.下载依赖

postcss-pxtorem 和 flexible

2.增加配置 vue.config.js

module.exports = {
  css: { // 依赖postcss-pxtorem 和 flexible 解决移动端自适应问题
    loaderOptions: {
      postcss: {
        plugins: [
          require("autoprefixer")({
            // 配置使用 autoprefixer
            overrideBrowserslist: ["last 15 versions"]
          }),
          require("postcss-pxtorem")({
            rootValue: 75, // 换算的基数
            // 忽略转换正则匹配项。插件会转化所有的样式的px。比如引入了三方UI，也会被转化。目前我使用 selectorBlackList字段，来过滤
            //如果个别地方不想转化px。可以简单的使用大写的 PX 或 Px 。
            selectorBlackList: ["ig"],
            propList: ["*"],
            exclude: /node_modules/
          })
        ]
      }
    }
  }
};

3. 在main.js 引入 import 'lib-flexible/flexible'

4可能会出现的报错方式和解决方案

https://blog.csdn.net/m0_47965154/article/details/115380574

5.最终效果

第三方库不会影响它之前的布局方式，我们自定义的样式会自动换算成rem

image.png

image.png

image.png