VUE项目移动端适配 rem

开发vue的移动端项目，使用px作为单位，在不同的设备屏幕上，效果会不同，所以要做屏幕适配。
要使用两个插件

postcss-pxtorem 是一款 postcss 插件，用于将单位转化为 rem

amfe-flexible 用于设置 rem 基准值
一、使用 amfe-flexible 动态设置 REM 基准值（html 标签的字体大小）

1. 安装

npm i amfe-flexible

2. 在main.js 中加载执行该模块，在main.js中输入下面命令：

import 'amfe-flexible'

二、使用 postcss-pxtorem 将 px 转为 rem

1. 安装

//-D 是 --save-dev 的简写
npm install postcss-pxtorem -D

如果执行这一步报错 ，执行 npm i postcss-pxtorem@5.1.1即可解决。
2. 在项目根目录（yy-web）中创建 postcss.config.js 文件

module.exports = {
  plugins: {
    "postcss-pxtorem": {
      // 设计稿 375:37.5
      // 设计稿：750:75
      // Vant 是基于 375
      rootValue: 37.5,
      // 这里 * 的意思是，所有的页面都做屏幕适配，若是想单独某一个页面做适配，就写该页面路径
      propList: ["*"]
    }
  }
}

至此，移动端项目适配已配置完毕，重新启动项目，即可看见单位已转化为rem了。