npm install postcss-pxtorem --save
npm i autoprefixer

import vue from '@vitejs/plugin-vue'
import { resolve } from 'path'
// 引入??
import postCssPxToRem from 'postcss-pxtorem'
import autoprefixer from 'autoprefixer'
 
const pathResolve = (dir) => {
    return resolve(__dirname, ".", dir)
}
 
const alias = {
    '@': pathResolve("src")
}
 
 
export default ({ command }) => {
    const prodMock = true;
    return {
        base: './',
        resolve: {
            alias
        },
        server: {
            port: 3004,
            host: '0.0.0.0',
            open: true,
        },
        build: {
            rollupOptions: {
                output: {
                    manualChunks: {
 
                    }
                }
            }
        },
        plugins: [
            vue(),
        ],
        css: {
            postcss: { // ??關鍵代碼
                plugins: [
                    postCssPxToRem({ // 自適應，px>rem轉換
                        rootValue: 16, // 1rem的大小
                        propList: ['*'], // 需要轉換的屬性，這里選擇全部都進行轉換
                    }),
                    autoprefixer({. // 自動添加前綴
                        overrideBrowserslist: [
                            "Android 4.1",
                            "iOS 7.1",
                            "Chrome > 31",
                            "ff > 31",
                            "ie >= 8"
                            //'last 2 versions', // 所有主流瀏覽器最近2個版本
                        ],
                        grid: true
                    })
                ]
            },
        }
    };
}

<template>
	<div id="app">
	</div>
</template> 
 
<script setup>
	// 自適應
	function resize() {
		let fs = document.body.clientWidth / 75; 
        // 上面的75是根據(jù)設計圖尺寸修改，例如設計圖寬為1220，給左右兩邊各留10px，即1220-20=1200，1200/16(字體大小)等于75
 
		if (fs > 16) { // 控制字體大小，以免過大過小
			fs = 16;
		} else if (fs < 14) {
			fs = 14;
		}
        // ??注意這里不能直接document.body.style
		document.body.parentNode.style = "font-size: " + fs + "px;";
	}
	resize();
	window.onresize = resize;
</script>