vue移动端适配lib-flexible+postcss-px2rem方案

339 阅读1分钟

首先是下载两个插件

cnpm i lib-flexible -S
cnpm i postcss-px2rem -S

说明

lib-flexible是淘宝适配方案
postcss-px2rem的作用是将px单位换算为rem

配置

vue.config.js文件中的配置

.....其他配置
//移动端自动计算配置
     css: { // 预先处理css 
        loaderOptions: { // 加载器 处理样式 
            css: {},
            postcss: { // 样式代码处理 
                plugins: [ // 插件 
                    require("postcss-px2rem")({ // px => rem  
                        remUnit: 37.5, // VantUI 设计稿尺寸 375 这里是采用的淘宝适配方案
                        exclude: /node_modules/i // 不包含 
                    })
                ]
            }
        }
    },

main.js中的配置

//导入淘宝适配
import 'lib-flexible'

查看是否适配成功

image.png