vue3 vite使用postcss-px-to-viewport 实现页面自适应

三、如何在 Vue3 中使用 postcss-px-to-viewport？

首先，我们需要安装相关的插件：
npm install postcss-px-to-viewport -D

在vite.config.js文件中进行配置

import vue from '@vitejs/plugin-vue'
// vite.config.ts
import { defineConfig } from 'vite'
import AutoImport from 'unplugin-auto-import/vite'
import Components from 'unplugin-vue-components/vite'
import { ElementPlusResolver } from 'unplugin-vue-components/resolvers'
import postcsspxtoviewport from 'postcss-px-to-viewport'
export default defineConfig({// ...plugins: [vue(),],//在这配置插件内容css: {postcss: {plugins: [postcsspxtoviewport({// 要转化的单位unitToConvert: 'px',// UI设计稿的大小viewportWidth: 1920,// 转换后的精度unitPrecision: 6,// 转换后的单位viewportUnit: 'vw',// 字体转换后的单位fontViewportUnit: 'vw',// 能转换的属性，*表示所有属性，!border表示border不转propList: ['*'],// 指定不转换为视窗单位的类名，selectorBlackList: ['ignore-'],// 最小转换的值，小于等于1不转minPixelValue: 1,// 是否在媒体查询的css代码中也进行转换，默认falsemediaQuery: false,// 是否转换后直接更换属性值replace: true,// 忽略某些文件夹下的文件或特定文件，例如 'node_modules' 下的文件exclude: [],// 包含那些文件或者特定文件include: [],// 是否处理横屏情况landscape: false}),]}}
})