1. 安装 postcss-px-to-viewport

pnpm add postcss-px-to-viewport -D

2. 在vite.config.js中配置

import {fileURLToPath, URL} from 'node:url'

import {defineConfig} from 'vite'
import vue from '@vitejs/plugin-vue'
import vueJsx from '@vitejs/plugin-vue-jsx'
import vueDevTools from 'vite-plugin-vue-devtools'

import AutoImport from 'unplugin-auto-import/vite';
import Components from 'unplugin-vue-components/vite';
import {VantResolver} from '@vant/auto-import-resolver';

import postcssPxToViewport from'postcss-px-to-viewport'


// https://vitejs.dev/config/
export default defineConfig({
    plugins: [
        vue(),
        vueJsx(),
        vueDevTools(),
        AutoImport({
            resolvers: [VantResolver()],
        }),
        Components({
            resolvers: [VantResolver()],
        }),
    ],
    resolve: {
        alias: {
            '@': fileURLToPath(new URL('./src', import.meta.url))
        }
    },
    server: {
        port: 8080,
        proxy: {
            '/product': {
                target: 'http://47.121.176.201:8083',
                changeOrigin: true,
                rewrite: path => path.replace(/^/product/, '/product')
            }
        }
    },
    css: {
        postcss: {
            plugins: [
                // 适配
                postcssPxToViewport({
                    unitToConvert: 'px',
                    viewportWidth: 375,
                    unitPrecision: 3,
                    propList: ['*'],
                    viewportUnit: 'vw',
                    fontViewportUnit: 'vw',
                    selectorBlackList: [],
                    minPixelValue: 1,
                    exclude: [],
                    include: []
                })
            ]
        }
    }
})

3. 对应版本信息

{
  "name": "shop",
  "version": "0.0.0",
  "private": true,
  "type": "module",
  "scripts": {
    "dev": "vite",
    "build": "vite build",
    "preview": "vite preview"
  },
  "dependencies": {
    "axios": "^1.7.7",
    "pinia": "^2.1.7",
    "vant": "^4.9.5",
    "vue": "^3.4.29",
    "vue-router": "^4.3.3"
  },
  "devDependencies": {
    "@vant/auto-import-resolver": "^1.2.1",
    "@vitejs/plugin-vue": "^5.0.5",
    "@vitejs/plugin-vue-jsx": "^4.0.0",
    "less": "^4.2.0",
    "postcss-px-to-viewport": "^1.1.1",
    "unplugin-auto-import": "^0.18.2",
    "unplugin-vue-components": "^0.27.4",
    "vite": "^5.3.1",
    "vite-plugin-vue-devtools": "^7.3.1"
  }
}