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代码中也进行转换，默认false
            mediaQuery: 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'),
      },
    }
  }
})