vue项目实现postcss-pxtoremvue大屏适配

1.安装依赖

npm install postcss-pxtorem autoprefixer postcss-loader --save-dev
# 或者
yarn add postcss-pxtorem autoprefixer postcss-loader --dev

2.配置 PostCSS

在项目根目录下创建一个 .postcssrc.js 文件，并添加以下配置：
module.exports = {
  plugins: {
    autoprefixer: {},
    'postcss-pxtorem': {
      rootValue: 16, // 1rem = 16px
      propList: ['*'], // 转换所有属性
      unitPrecision: 5, // 单位精度
      replace: true, // 替换 px 为 rem
      mediaQuery: false, // 不转换媒体查询中的单位
      minPixelValue: 1, // 最小像素值
      exclude: /node_modules/i, // 排除 node_modules，如果是多个 [/node_modules/, /public/], // 排除 node_modules 和 public 目录
    },
  },
};

3.配置 webpack

// vue.config.js
module.exports = {
  css: {
    loaderOptions: {
      postcss: {
        plugins: [
          require('autoprefixer'),
          require('pos