npm install -S amfe-flexible
npm i postcss-px2rem --save-dev

在vue.config配置以下代码

 module.exports = {
  css: {
    loaderOptions: {
      postcss: {
        plugins: [
          require("postcss-px2rem")({
            remUnit: 192   //设计稿的宽度
          })
        ]
      }
    },
  },
};

在main.js引入

import "amfe-flexible/index.js";

使用postcss-px2rem无法对行内样式生效，通过下面代码可以解决该问题

可在utils 封装 px2rem.js

export default function px2rem(px) {
    if (/%/ig.test(px)) { // 有百分号%，特殊处理，表述pc是一个有百分号的数，比如：90%
        return px
    } else {
        return (parseFloat(px) / 192) + 'rem' //设计稿宽度  1920 /10 = 192
    }
}

在main.js 导入并全局使用

//px 转换rem
import px2rem from "./utils/px2rem";
Vue.prototype.$px2rem = px2rem // 放到全局