vite 配置postcss-px-to-viewport 并兼容 vant

你可以按照以下步骤配置 Vite 的 postcss-px-to-viewport 插件并兼容 Vant：

1. 首先，确保已经安装了 Vite 和 postcss-px-to-viewport 插件：

npm install vite postcss-px-to-viewport --save-dev

2. 在项目根目录下创建一个 `postcss.config.js` 文件，并添加以下代码：

module.exports = {
  plugins: {
    'postcss-px-to-viewport': {
      unitToConvert: 'px',
      viewportWidth: 375,  // 设计稿宽度
      viewportUnit: 'vw',
      fontViewportUnit: 'vw',
      unitPrecision: 3,
      minPixelValue: 1,
      mediaQuery: false,
      landscape: false,
      landscapeUnit: 'vw',
      landscapeWidth: 568  // 横屏时设计稿宽度
    }
  }
}

3. 在你的 Vite 配置文件（一般是 `vite.config.js`）中添加 postcss 插件：

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

export default defineConfig({
  plugins: [
    vue(),
    {
      name: 'postcss',
      config: async () => {
        return {
          plugins: [
            require('postcss-px-to-viewport')()
          ]
        }
      }
    }
  ]
})

4. 如果你的项目中同时使用了 Vant，你需要在 Vant 的样式中禁用掉 postcss-px-to-viewport 的转换。在你的样式文件（一般是 `main.js`）中添加以下代码：

import 'vant/lib/index.css'
import { createApp } from 'vue'
import App from './App.vue'

const app = createApp(App)
app.use(/* ... */)
app.mount('#app')

// 添加以下代码
const { use } = require('postcss-px-to-viewport')
const postcss = require('postcss')

const css = `
@import "vant/lib/index.css";
`

postcss([use({ exclude: /vant/ })])
  .process(css, {
    from: undefined
  })
  .then(result => {
    const output = result.css
    const style = document.createElement('style')
    style.innerHTML = output
    document.head.appendChild(style)
  })

这样就完成了 Vite 配置 postcss-px-to-viewport 并兼容 Vant 的过程。你可以根据需要调整配置中的参数来满足你的要求。