pc端自适应尺寸（lib-flexible）+ 自动渲染px至r

1. 安装

npm i postcss-pxtorem
npm i lib-flexible

2. vue.config.js文件

const autoprefixer = require('autoprefixer')
const pxtorem = require('postcss-pxtorem')
module.exports = defineConfig({
  transpileDependencies: true,
  css: {
    loaderOptions: {
      // pxtorem配置
      postcss: {
        postcssOptions: {
          plugins: [
            autoprefixer(),
            pxtorem({
              rootValue: 192, //设计稿宽度为1920px
              propList: ['*'],//['*'],
            }),
          ]
        }
      },
      sass: {
        // scss全局变量配置（根据需求来，可不配置）
        additionalData: `@import "@/assets/styles/globalVariable.scss";`
      }
    }
  },
  、、、
})

3. main.ts中引入lib-flexible

import 'lib-flexible/flexible'

注意:

• 若要支持pc端自适应尺寸,需要修改lib-flexible源码

// 文件路径 node_modules/lib-flexible/flexible.js
function refreshRem(){
    var width = docEl.getBoundingClientRect().width;
    if (width / dpr > 540) {
        width = 540 * dpr;
    }
    var rem = width / 10;
    docEl.style.fontSize = rem + 'px';
    flexible.rem = win.rem = rem;
}
// 把上面那段代码改成下面这样
function refreshRem(){
    var width = docEl.getBoundingClientRect().width;
    if (width / dpr > 540) {
        width = width * dpr;
    }
    var rem = width / 10;
    docEl.style.fontSize = rem + 'px';
    flexible.rem = win.rem = rem;
}