vue2和vue3适配移动端

vue2

npm install amfe-flexible --save
import "amfe-flexible"

npm install [email protected] --save
vue.config.js里面加入配置项
css: {
    loaderOptions: {
          postcss: {
            plugins: [
                require('postcss-pxtorem')({
                    rootValue: 75,
                    propList: ['*'],
                    selectorBlackList: ['van'] // 过滤van开头的类名，不进行rem转换
                })
            ]
        }
    }
}

vue3

npm install amfe-flexible --save
import "amfe-flexible"

npm install [email protected] --save
postcss.config.js里面加入配置项
module.exports = {
    plugins: {
        // postcss-pxtorem 插件的版本需要 >= 5.0.0
        // 适用版本 5.1.1
        // yarn add -D [email protected]
        // npm install [email protected] -D
        'postcss-pxtorem': {
            rootValue({ file }) { // 判断是否是vant的文件 如果是就使用 37.5为根节点字体大小
                // 否则使用75 因为vant使用的设计标准为375 但是市场现在的主流设置尺寸是750
                return file.indexOf('vant') !== -1 ? 37.5 : 75;
            },
            // 配置哪些文件中的尺寸需要转化为rem *表示所有的都要转化
            propList: ['*'],
        },
    },
};