vue项目中做自适应，rem自适应

执行npm install autoprefixer --save

npm install autoprefixer --save  // 版本号为  ^7.1.2

执行npm install lib-flexible --save

npm install lib-flexible --save  //版本号为  ^0.3.2

执行npm install postcss-pxtorem --save-dev

npm install postcss-pxtorem --save-dev   //版本号为  ^5.1.1

在main.js中引入

import 'lib-flexible/flexible'

找到node_modules中lib-flexible/flexible.js文件，此处修改是因为这款插件是为了适应手机端的适配做的，屏幕宽度限制在了540，pc/web端这个需要修改，手机端可以不用改，var rem = width / 10，后面的10可以根据需要自行调整，调整看效果你就知道有啥作用了。

function refreshRem(){
        var width = docEl.getBoundingClientRect().width;
        if (width / dpr > 540) {
         	// 修改前 width = 540 * dpr; 
            width = width * dpr;
        }
        var rem = width / 10;
        docEl.style.fontSize = rem + 'px';
        flexible.rem = win.rem = rem;
    }

如果是vue3.x版本，请找到vue.config.js文件

const autoprefixer = require('autoprefixer') // 引入autoprefixer
const pxtorem = require('postcss-pxtorem') // 引入postcss-pxtorem
module.exports = {
  lintOnSave: false,
  chainWebpack: (config) => {
    //忽略的打包文件
    config.externals({
      'vue': 'Vue',
      'vue-router': 'VueRouter',
      'vuex': 'Vuex',
      'axios': 'axios',
      'element-ui': 'ELEMENT',
    })
  },
  // 主要是下面这个一块css配置要加入进去(至关重要)
  css: {
    // 当为true时，css文件名可省略 module 默认为 false
        modules: true,
    // 是否将组件中的 CSS 提取至一个独立的 CSS 文件中,当作为一个库构建时，你也可以将其设置为 false 免得用户自己导入 CSS
    // 默认生产环境下是 true，开发环境下是 false
        extract: false,
    // 是否为 CSS 开启 source map。设置为 true 之后可能会影响构建的性能
        sourceMap: false,
    //向 CSS 相关的 loader 传递选项(支持 css-loader postcss-loader sass-loader less-loader stylus-loader)
    loaderOptions: {
      postcss:{
        plugins:[
          autoprefixer(),
          pxtorem({
            rootValue:256,
            propList:['*']
          })
        ]
      }
    }
  },
}

这个时候重新npm run serve项目，到页面审查元素，发现所有的px单位都被改为rem就成功了