postcss-px-to-viewport搭配vue cli5以及vite如何配置使用

在Vue CLI 5和Vite中使用css-px-to-viewport插件可以帮助我们将px单位转换为vw或者vh单位，以适应不同屏幕尺寸的设备。下面是在两种构建工具中的配置方法：

在Vue CLI 5中的配置方法如下：
1. 首先，安装postcss-px-to-viewport插件：

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

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

module.exports = {
  plugins: {
    'postcss-px-to-viewport': {
      viewportWidth: 375, // 设计稿的宽度
      unitPrecision: 3, // 转换后的小数位数
      viewportUnit: 'vw', // 转换的单位
      selectorBlackList: ['.ignore'], // 不需要转换的类名
      minPixelValue: 1, // 小于等于1px不转换
      mediaQuery: false // 允许在媒体查询中转换px
    }
  }
}

3. 在项目的vue.config.js文件中添加以下配置：

module.exports = {
  css: {
    loaderOptions: {
      postcss: {
        config: {
          path: 'postcss.config.js'
        }
      }
    }
  }
}

这样配置后，编译时会自动将样式中的px单位转换为vw单位。

在Vite中的配置方法如下：
1. 首先，安装postcss-px-to-viewport插件：

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

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

module.exports = {
  plugins: [
    require('postcss-px-to-viewport')({
      viewportWidth: 375, // 设计稿的宽度
      unitPrecision: 3, // 转换后的小数位数
      viewportUnit: 'vw', // 转换的单位
      selectorBlackList: ['.ignore'], // 不需要转换的类名
      minPixelValue: 1, // 小于等于1px不转换
      mediaQuery: false // 允许在媒体查询中转换px
    })
  ]
}

3. 在vite.config.js文件中添加以下配置：

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

export default defineConfig({
  plugins: [
    vue(),
  ],
  css: {
    postcss: {
      plugins: [
        require('./postcss.config.js')
      ]
    }
  }
})

这样配置后，编译时会自动将样式中的px单位转换为vw单位。

希望以上配置能够帮助到你，如果有任何问题，请随时提问。