vue-cli3.0 使用postcss-plugin-px2rem（推荐）自动转换px为rem 的配置方法_vite postcss-plugin-px2rem

第一步安装

npm install amfe-flexible -S
npm install postcss-px2rem -S
1
2

第二步引入 lib-flexible

在入口main.js中 引入 lib-flexible
import "amfe-flexible/index.js";
1
2

注意事项（important）: 由于flexible会动态给页面header中添加标签，所以务必请把目录 public/index.html 中的这个标签删除！！！

配置postcss-px2rem

vuecli3 配置

px2rem的配置放在vue-cli3 项目中vue.config.js中（找不到？可能你是一个新构建的项目，需要手动在项目根目录创建vue.config.js）
具体配置内容如下：
postcss-pxtorem 在postcss.config.js中配置

module.exports = {
    css: {
        loaderOptions: {
          css: {},
          postcss: {
        plugins: [
          require("postcss-px2rem")({
            remUnit: 37.5
          })
        ]
      }
        }
    }
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14

使用方法
按照上面的步骤写完后，使用时设计图750px的，那设计图要是300px的宽度，那代码里面写成300px。这样就可以了