vite + vue3 + vant项目的Rem布局适配

安装

lib-flexible安装到开发环境

postcss安装到生产环境

npm i lib-flexible -S

npm i postcss-pxtorem -D

配置

vite搭建的项目不支持这种形式的配置文件，需要在vite.config.js中配置

export default defineConfig({
  plugins: [
    vue(),
    Components({
      resolves: [VantResolver()],
    }),
  ],
  css:{
    postcss:{
      plugins:[
        postCssPxToRem({
          rootValue:37.5,   //1rem的大小
          propList:['*'],   //需要转换的属性
          selectorBlackList:[".norem"]     //过滤掉不需要转换的类名
        })
      ]
    },
  }
})

点击查看vant官网 Rem布局适配