vue项目的移动端适配方案

方案：amfe-flexible+amfe-flexible

1.amfe-flexible
amfe-flexible是配置可伸缩布局方案，主要是将1rem设为viewWidth/10。

2.postcss-pxtorem
postcss-pxtorem是postcss的插件，用于将像素单元生成rem单位。

使用步骤

 1、先安装amfe-flexible和postcss-pxtorem

npm install amfe-flexible --save
npm install postcss-pxtorem --save

2、在main.js中引用

import 'amfe-flexible';

3、 配置postcss-pxtorem

可在vue.config.js、.postcssrc.js、postcss.config.js其中之一配置，权重从左到右降低，没有则新建文件，只需要设置其中一个即可。

① vue.config.js（亲测该方法，可用）

module.exports = defineConfig({
  "plugins":{  //新增配置
    "postcss-pxtorem": {
      rootValue: 37.5, // Vant 官方根字体大小是 37.5