vue3 vite vant 配置rem适配

1. 安装 postcss-pxtorem 插件

npm install postcss-pxtorem -D

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

module.exports = {
  plugins: {
    'postcss-pxtorem': {
      rootValue: 32, // 设计稿宽度/10，即32px = 1rem
      propList: ['*'],
      exclude: /(node_module)/
    }
  }
}

3. 在 vite.config.js 中添加 postcss 插件

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

export default defineConfig({
  plugins: [
    vue(),
    // 添加 postcss 插件
    require('postcss-pxtorem')({
      rootValue: 32,
      propList: ['*'],
      exclude: /(node_module)/
    })
  ]
})

4. 安装 lib-flexible

npm install lib-flexible -S

5. 在 main.js 中引入 lib-flexible

import 'lib-flexible/flexible.js'

6. 在 vant 官网中找到需要使用的组件，并按照官方文档中的使用方法修改样式，例如：

/* 修改按钮样式 */
.van-button {
  font-size: 14px;
  height: 40px;
  line-height: 40px;
  padding: 0 20px;
  border-radius: 20px;
}

修改为

.van-button {
  font-size: 0.4375rem;
  height: 1.25rem;
  line-height: 1.25rem;
  padding: 0 0.625rem;
  border-radius: 0.625rem;
}

通过以上步骤，即可完成 rem 适配的配置。