vue3配置postcss-pxtorem

### 配置 PostCSS Pxtorem 实现 PX 到 REM 的转换

在 Vue 3 项目中配置 `postcss-pxtorem` 插件可以方便地将样式中的像素单位自动转换为相对单位 rem。这有助于提高页面布局的灵活性和响应性。

#### 安装依赖包
首先，在命令行工具中安装必要的 npm 包：

npm install postcss-loader pxtorem --save-dev

此操作会下载并保存 `postcss-loader` 和 `pxtorem` 至开发环境下的 node_modules 文件夹内[^1]。

#### 修改 vue.config.js 或者创建 postcss.config.js
如果项目根目录下存在 `vue.config.js`，可以在其中添加如下配置；如果没有该文件，则需新建一个名为 `postcss.config.js` 的文件用于定义 PostCSS 处理器选项:

对于 `vue.config.js` :

module.exports = {
    css: {
        loaderOptions: {
            postcss: {
                plugins: [
                    require('autoprefixer'),
                    require('postcss-pxtorem')({
                        rootValue: 16,
                        propList: ['*'],
                        selectorBlackList: [],
                        replace: true,
                        mediaQuery: false,
                        minPixelValue: 0
                    })
                ]
            }
        }
    }
}

而对于独立的 `postcss.config.js` ，则应编写成这样:

module.exports = {
    plugins: {
        'autoprefixer': {},
        'postcss-pxtorem': {
            rootValue: 16,
            propList: ['*'],
            selectorBlackList: [],
            replace: true,
            mediaQuery: false,
            minPixelValue: 0
        }
    }
};

上述设置指定了当遇到任何 CSS 属性时都将 px 转换为 rem 单位，并设定了基础字体大小为 16 像素。

完成以上步骤之后重新启动构建服务即可生效新的编译规则。现在每当书写 .scss/.less/.css 样式表单的时候都可以放心使用固定的 px 数值而不用担心不同设备上的显示效果差异问题了。