当前位置：首页 > ops >正文

如何在vite构建的vue项目中从0到1配置postcss-pxtorem

ops 2025/9/3 22:37:41

1. 安装postcss-pxtorem和autoprefixer

yarn add postcss-pxtorem autoprefixer

2. 在vite.config.ts中写入

import { defineConfig } from "vite";
import vue from "@vitejs/plugin-vue";
import postcssPxtorem from "postcss-pxtorem";
import autoprefixer from "autoprefixer";
import path from "path";export default defineConfig({plugins: [vue()],server: {host: true,port: 80,},css: {postcss: {plugins: [postcssPxtorem({rootValue: 16, // 基准值，表示1rem等于多少pxselectorBlackList: [], // 不转换的类名前缀列表propList: ["*"], // 需要转换的属性 *表示所有属性mediaQuery: true, // 是否在媒体查询的css代码中也进行转换minPixelValue: 1, // 设置要替换的最小像素值}),autoprefixer(),],},},resolve: {alias: {"@": path.resolve(__dirname, "./src"),},},
});

3. 写一个setRemTs文件，并在mainTs文件中引入

/*** 动态设置根元素的字体大小* @param {number} designWidth - 设计稿的宽度*/
function setRem(designWidth: number) {const docEl = document.documentElement;const resizeEvt = 'orientationchange' in window ? 'orientationchange' : 'resize';const recalc = () => {const clientWidth = docEl.clientWidth;if (!clientWidth) return;// 根据设计稿宽度计算根元素字体大小docEl.style.fontSize = 16 * (clientWidth / designWidth) + 'px';};if (!document.addEventListener) return;window.addEventListener(resizeEvt, recalc, false);document.addEventListener("DOMContentLoaded", recalc, false);
}
setRem(1920);export default setRem;