效果图：

步骤 1：安装 PostCSS 和 PostCSS 插件

npm install postcss postcss-pxtorem --save-dev

步骤 2：配置 nuxt.config.ts

// nuxt.config.ts
export default defineNuxtConfig({compatibilityDate: '2024-04-03',devtools: { enabled: false },devServer: {host: '0.0.0.0',port: 3000},app: {head: {script: [{children: `(function() {function setRemUnit() {var docEl = document.documentElement;var clientWidth = docEl.clientWidth;if (!clientWidth) return;var rem = clientWidth / 19.2;docEl.style.fontSize = rem + 'px';}setRemUnit();if (window.addEventListener) {window.addEventListener('resize', setRemUnit);window.addEventListener('pageshow', function(e) {if (e.persisted) {setRemUnit();}});}})();`}],meta: [{ name: 'viewport', content: 'width=device-width, initial-scale=1' }]}},css: ['~/assets/css/style.css'],site: {url: 'http://localhost:3000',name: 'name',description: 'description',},modules: ['@nuxtjs/seo'],// Vite CSS配置vite: {css: {postcss: {plugins: [require('postcss-pxtorem')({rootValue: 192, // 1rem = 192px，基于1920px设计稿propList: ['*'], // 转换所有属性unitPrecision: 5, // 保留rem单位的小数位数minPixelValue: 1, // 不转换小于1px的值mediaQuery: false, // 是否转换媒体查询中的px})]}}}
});