Vue3+TS+Vite 引入 postcss-px-to-viewport-8-plugin

为了在Vue3+TS+Vite项目中使用postcss-px-to-viewport-8-plugin，需要按照以下步骤进行操作：

1. 安装依赖：

npm install postcss-px-to-viewport-8-plugin -D

2. 在项目根目录下创建postcss.config.js文件，并添加以下内容：

const autoprefixer = require('autoprefixer');
const pxtoviewport = require('postcss-px-to-viewport-8-plugin');

module.exports = {
  plugins: [
    autoprefixer(),
    pxtoviewport({
      viewportWidth: 375, // 视窗的宽度，对应设计稿的宽度
      viewportHeight: 667, // 视窗的高度，对应设计稿的高度
      unitPrecision: 5, // 指定`px`转换为视窗单位值的小数位数
      viewportUnit: 'vw', // 指定需要转换成的视窗单位，建议使用vw
      selectorBlackList: ['.ignore', '.hairlines'], // 指定不转换为视窗单位的类，可以自定义，可以无限添加，建议定义一至两个通用的类名
      minPixelValue: 1, // 小于或等于`1px`不转换为视窗单位，你也可以设置为你想要的值
      mediaQuery: false // 允许在媒体查询中转换`px`
    })
  ]
}

3. 在vite.config.ts文件中添加postcss配置：

import { defineConfig } from 'vite';
import vue from '@vitejs/plugin-vue';

export default defineConfig({
  plugins: [vue()],
  css: {
    postcss: {
      plugins: [
        require('autoprefixer'),
        require('postcss-px-to-viewport-8-plugin')({
          viewportWidth: 375,
          viewportHeight: 667,
          unitPrecision: 5,
          viewportUnit: 'vw',          selectorBlackList: ['.ignore', '.hairlines'],
          minPixelValue: 1,
          mediaQuery: false
        })
      ]
    }
  }
});

4. 重启项目即可实现px转vw。