vue3 + vite + vant rem适配

1. 在index.html 替换原有的meta标签

<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, minimum-scale=1, user-scalable=no">

2. 安装插件

npm install amfe-flexible --save

npm install postcss-pxtorem --save

3. 在 vite.config.js 文件中配置css.postcss选项。

import postCssPxToRem from "postcss-pxtorem";
export default defineConfig({
    plugins: [vue()],
    css: {
        postcss: {
            plugins: [
                postCssPxToRem({
                    rootValue: 75, // 1rem，根据 设计稿宽度/10 进行设置
                    propList: ['*'], // 需要转换的属性，这里选择全部都进行转换
                })
            ]
        }
    },
})

4. 在 main.js 中引入 amfe-flexible 插件：

import 'amfe-flexible';