vite中配置postcss-px-to-viewport(兼容vant)

首先安装相关依赖postcss-px-to-viewport-8-plugin或者postcss-px-to-viewport都可以 npm install postcss-px-to-viewport-8-plugin --save-dev 如果嫌速度慢的话可以使用淘宝镜像 然后在vite.config.ts中进行相关配置 首先引入postcss-px-to-viewport import pxtovw from 'postcss-px-to-viewport-8-plugin' 然后对pxtovw进行配置，这里只进行基础的配置，网上有相关配置的详细说明

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

const loder_pxtovw = pxtovw({
  viewportWidth: 750,
  viewportUnit: 'vw',
  exclude:[/node_modules\/vant/i]
})

但是这种会对第三方组件库的样式，这里以vant组件为例，vant组件的设计稿为375，而上面是设计稿750的，因此在实际页面中vant组件大小会偏小，在这里参考网上的写法，针对组件库重新配置一套

const vant_pxtovw = pxtovw({
  viewportWidth: 375,
  viewportUnit: 'vw',
  exclude: [/^(?!.*node_modules\/vant)/] //忽略除vant之外的
})

完整代码

//vite.config.ts
import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
import Components from 'unplugin-vue-components/vite';
import { VantResolver } from 'unplugin-vue-components/resolvers';
import pxtovw from 'postcss-px-to-viewport-8-plugin'
const loder_pxtovw = pxtovw({
  viewportWidth: 750,
  viewportUnit: 'vw',
  exclude:[/node_modules\/vant/i]
})
const vant_pxtovw = pxtovw({
  viewportWidth: 375,
  viewportUnit: 'vw',
  exclude: [/^(?!.*node_modules\/vant)/] //忽略除vant之外的
})
export default defineConfig({
  plugins: [
    vue(),
    Components({
      resolvers: [VantResolver()],
    }),
  ],
  css: {
    postcss: {
      plugins: [loder_pxtovw, vant_pxtovw]
    }
  },
  resolve: {
    alias: {
      '@': path.resolve(__dirname, './src'),
      '*': path.resolve('')
    }
  },
});

但是这种方法会使插件执行两次， 如果有错误的地方或者更好的解决方法，欢迎指出 参考链接