vue移动端适配方案

一、安装依赖包

yarn add amfe-flexible -D
yarn add postcss-pxtorem -D

二、入口文件引入amfe-flexible

import 'amfe-flexible'

三、配置文件里配置解析postcss-pxtorem的插件

vue.config.js 文件里配置
css: {

    loaderOptions: {
        postcss: {
            postcssOptions:{
      plugins: [
        //
        require('postcss-pxtorem')({//这里是配置项，详见官方文档
          rootValue: 75, // 换算的基数
          selectorBlackList: ['weui', 'mu'], // 忽略转换正则匹配项
          propList: ['*'],
        }),
      ]
    }
        }
    }
},

一开始的配置会导致启动服务报错

错误配置如下：

报错信息：

Invalid options object. PostCSS Loader has been initialized using an options object that does not match the API schema.

options has an unknown property ‘plugins’. These properties are valid:
object { postcssOptions?, execute?, sourceMap?, implementation? }

原因：

postcss应该是个对象，但是这个对象没有plugins,只有{ postcssOptions?, execute?, sourceMap?, implementation?}这四个属性，修改后用postcssOptions包住plugins就好了

四、验证是否生效

设置font-size，看字体是否随着屏幕大小的变化而变化