vue 中将 px 转化为 rem 适配

1. 安装postcss-pxtorem 和 amfe-flexible

npm install postcss-pxtorem -S
npm install amfe-flexible -S

2.在main.js 中引入 amfe-flexible

3.在根目录下创建.postcssrc.js, 并写入以下代码

module.exports = {
  plugins: {
    // postcss-pxtorem 插件的版本需要 >= 5.0.0
    'postcss-pxtorem': {
      // 移动端
      // rootValue({ file }) {
      //   return file.indexOf('vant') !== -1 ? 37.5 : 75;
      // },
      rootValue: 192, // 设计图尺寸/10
      propList: ['*'], // 全部转换
    },
  },
};

4.配置完成后重启就行, 如果报错如下图, 就将postcss-pxtorem的版本安装为5.1.1

Error: PostCSS plugin postcss-pxtorem requires PostCSS 8.