Vue项目使用postcss-pxtorem（px转rem）进行适配

前言：vue项目适配可借助于插件lib-flexible和postcss-px2rem。

lib-flexible插件作用：根据屏幕尺寸不同设置html根标签的字体大小，1rem即等于根标签的字体大小。

postcss-px2rem插件作用：将px转为rem,这样我们就可以根据设计稿使用px进行项目的开发。

使用步骤：

1.安装 lib-flexible

npm i lib-flexible -D

2.在main.js文件中引入flexible

import 'lib-flexible/flexible'

3. 安装postcss-pxtorem

npm install postcss-pxtorem --save-dev

4.安装postcss-plugin-px2rem

npm install postcss-plugin-px2rem -S

5.在vue.config.js中进行配置

css: {
    loaderOptions: {
      sass: {
        sassOptions:{
          outputStyle:'expanded'
        },
      },
      postcss: {
        postcssOptions: {
          plugins: [
            require('postcss-plugin-px2rem')({
              rootValue: 192,      // 1rem等于192px
              mediaQuery: false, //（布尔值）允许在媒体查询中转换px。
              unitPrecision:6,//保留小数点的位数
              minPixelValue: 12 //设置要替换的最小像素值(12px会被转rem)。 默认 0
            }),
          ]
        },
      }
    },
  },

注意：1.修改完vue.config.js需要重新启动项目；2.对于行内样不生效

重启项目后，打开控制台--->显示下图：

出现左侧红色框中的内容：表明lib-flexible插件生效

出现右侧红色框中的内容：表明postcss-pxtorem插件生效