Vue3 postcss-px-to-viewport-8-plugin

适配用的，把px转换成vw进行页面内容的适配

效果

.selector {
width: 100px;
font-size: 14px;
margin: 10px;
}
转化为

.selector {
width: 13.33vw;
font-size: 1.87vw;
margin: 1.33vw;
}

1、安装postcss-px-to-viewport-8-plugin

npm install postcss-px-to-viewport-8-plugin --save-dev

 2、在vite.config.js进行配置

import { defineConfig, loadEnv } from 'vite'
import vue from '@vitejs/plugin-vue'//配置的地方---------------开始-----------------
import postcsspxtoviewport from 'postcss-px-to-viewport-8-plugin'//配置的地方---------------结束-----------------// https://vite.dev/config/
export default defineConfig(({ mode }) => {const env = loadEnv(mode, process.cwd());return {plugins: [vue(),],css: {//配置的地方---------------开始-----------------postcss: {plugins: [tailwindcss,autoprefixer,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}),]//配置的地方---------------结束-----------------},preprocessorOptions: {scss: {additionalData: `@use "@/assets/css/index.scss" as *;`,},}},resolve: {base: '',publicDir: path.resolve(__dirname, './dist'),assetsInclude: path.resolve(__dirname, './src/assets'),// 配置路径别名alias: {'@': path.resolve(__dirname, 'src'),'@/assets': path.resolve(__dirname, './src/assets'),'@/views': path.resolve(__dirname, './src/views'),},}}
})