vue3 vite 配置rem

### 配置 Vue 3 和 Vite 使用 REM 单位

#### 安装必要的依赖包
为了使项目支持 `rem` 单位，在项目根目录下执行命令来安装所需的 PostCSS 插件以及屏幕适配库：

npm install postcss-pxtorem amfe-flexible

或者如果偏好 Yarn，则可以运行：

yarn add postcss-pxtorem amfe-flexible

这会下载并安装两个主要组件：一个是用于将像素值转换为相对单位（即 rem）的工具；另一个则是动态调整页面基础字体大小以实现响应式的 JavaScript 库[^3]。

#### 创建或修改 PostCSS 配置文件
创建名为 `postcss.config.js` 的配置文件于项目根目录内，并向其中添加如下内容以便定义哪些 CSS 属性应该被转化为 `rem` 值，同时也指定了设计稿的基础尺寸和其他选项：

module.exports = {
    plugins: {
        autoprefixer: {
            overrideBrowserslist: [
                "Android 4.1",
                "iOS 7.1",
                "Chrome > 31",
                "ff > 31",
                "ie >= 8",
                "last 10 versions"
            ],
            grid: true,
        },
        'postcss-pxtorem': {
            rootValue: 192, // 设计稿宽度的一半作为基准值
            propList: ['*', '!border'], // 将所有属性转成 rem，除了边框外
            selectorBlackList: ['.el-', '.van-'] // 排除特定前缀的选择器不做处理
        }
    }
};

此设置确保了大多数情况下能够自动把样式表中的固定长度从 px 替换成更灵活的 rem 形式，从而更好地适应不同设备上的显示需求[^2].

#### 引入 flexible 脚本
最后一步是在应用入口处加载 `amfe-flexible` 来初始化文档流内的 HTML 元素的 font-size 样式。打开 `src/main.js` 文件并将下面这一行代码加进去：

import 'amfe-flexible';

通过这种方式可以在每次页面加载时根据当前视口宽度计算合适的 base 字体大小，进而影响到整个应用程序中所有的 rem 计算结果[^1].