上篇说到了 React 项目中使用 postcss-pxtorem 实现移动端适配，这不，想着在 vue 中应该是一样的，所以全盘挪了过来，发现不太行，折腾了一番，发现写法有些不太一样。

1、安装 postcss-pxtorem

npm install postcss-pxtorem -D

2、在 vue.config.js 配置文件中配置如下

const { defineConfig } = require('@vue/cli-service')
module.exports = defineConfig({
  transpileDependencies: true,
  css: {
    loaderOptions: {
      // less-loader 5的配置
      less: {
        javascriptEnabled: true
      },

      // less-loader 8的配置
      // less: {
      //   lessOptions: {
      //     javascriptEnabled: true
      //   }
      // }

      // 如果是@vue/cli-service 5配置如下
      postcss: {
        postcssOptions: {
          plugins: [
            require('postcss-pxtorem')({
              rootValue: 16,
              unitPrecision: 5, // 转换后的小数保留位数
              replace: true, // 是否替换，默认为true
              propList: ['*'], // 需要转换的属性，这里选择转换所有属性
              selectorBlackList: ['.ignore-'], // 忽略转换的选择器
              exclude: /node_modules/i, // 排除node_modules文件夹下的文件
              mediaQuery: false, // 是否转换媒体查询中的px
              minPixelValue: 2 // 大于或等于2px的才转换
            })
          ]
        }
      },

      // @vue/cli-service 4配置如下
      // postcss: {
      //   plugins: [
      //     require("postcss-pxtorem")({
      //       rootValue: 16, // 换算的基数
      //       propList: ["*"], // 需要转换的属性，这里选择全部都转
      //       selectorBlackList: [".ignore-"], // 要忽略的类名
      //       minPixelValue: 2, // 设置最小的转换数值，如果为 1，只有newValue大于1，才会被转换
      //       mediaQuery: false,
      //       exclude: /node_modules/,
      //       replace: true,
      //       unitPrecision: 5
      //     })
      //   ]
      // }
    }
  }
})

在默认配置基础上，增加 css 包裹的这一块配置代码。

如果按 @vue/cli-service 4 配置的那样报如下错误信息：Error: PostCSS plugin postcss-pxtorem requires PostCSS 8.
Migration guide for end-users

这是因为安装的 postcss-pxtorem 版本是 6.x 的，需要依赖 postcss 8。

解决办法：

方法 1、安装 postcss 可解决

npm install postcss -D

方法 2、降级 postcss-pxtorem 版本到 5.x 即可解决

npm install postcss-pxtorem@5 -D

到这里我们就可以在项目中所写的 px 单位会自动转换成 rem 为单位，但是并不能实现不同尺寸的设备自适应，我们需要重新创建一个文件，来实现不同尺寸设备下动态更改 html 元素 font-size 的大小的目的。

在根目录的 src 文件夹下建立 utils 工具文件夹，该文件夹下建立 rem.js 文件

// 基准大小
const baseSize = 16
// 设置 rem 函数
function setRem () {
  // 当前页面宽度相对于 375 宽的缩放比例，可根据自己需要修改。
  const scale = document.documentElement.clientWidth / 375
  // 设置页面根节点字体大小
  document.documentElement.style.fontSize = (baseSize * Math.min(scale, 2)) + 'px'
}
// 初始化
setRem()
// 改变窗口大小时重新设置 rem
window.onresize = function () {
  setRem()
}

在项目入口文件 main.js 文件中引入该文件

import './utils/rem'

至此，重启项目，就可以愉快地玩耍了。

注意：
对于内联样式， px 是无法自动转换成 rem 的，需要自行处理，可以封装一个函数处理一下

补充:

在使用postcss-pxtorem插件后，发现原本css属性会自动添加浏览器前缀，现在却没有了，因此，为了兼容性，使用了插件autoprefixer。

1、安装插件 autoprefixer

npm install autoprefixer -D

2、在配置文件中添加如下配置

plugins: [
  require("autoprefixer")({
    overrideBrowserslist: [
      "Android 4.1",
      "iOS 7.1",
      "Chrome > 31",
      "ff > 31",
      "ie >= 8",
      "last 50 versions",
    ],
    grid: true, // 是否使用 autoprefixer
  })
]

完整配置如下：

module.exports = {
  css: {
    loaderOptions: {
      less: {
        javascriptEnabled: true
      },
      postcss: {
        plugins: [
          require("postcss-pxtorem")({
            rootValue: 16,
            propList: ["*"],
            selectorBlackList: [".ignore-"],
            minPixelValue: 2,
            mediaQuery: false,
            exclude: /node_modules/,
            replace: true,
            unitPrecision: 5
          }),
          require("autoprefixer")({
            overrideBrowserslist: [
              "Android 4.1",
              "iOS 7.1",
              "Chrome > 31",
              "ff > 31",
              "ie >= 8",
              "last 50 versions",
            ],
            grid: true, // 是否使用 autoprefixer
          })
        ]
      }
    },
    extract: true, // 是否使用css分离插件 ExtractTextPlugin
    sourceMap: false, // 开启 CSS source maps
    requireModuleExtension: true
    // modules: false // 启用 CSS modules for all css / pre-processor files.
  }
}

现在重启项目，可能会遇到如下错误信息：Error: PostCSS plugin autoprefixer requires PostCSS 8.
Migration guide for end-users

这里报错信息显示 autoprefixer 需要安装插件 postcss，原因是 autoprefixer 版本太高，解决办法有两种。

方法 1、安装 postcss 可解决

npm install postcss -D

方法 2、降低 autoprefixer 版本到 8

npm install autoprefixer@8 -D

现在重启项目后，发现 css 属性又自动添加浏览器前缀了。