vue2 项目使用px2rem插件做自适应

首先安装插件

npm install postcss-px2rem
npm install px2rem-loader

在根目录下创建 vue.config.js，写入

const px2rem = require('postcss-px2rem')
const postcss = px2rem({
  remUnit: 16   //基准大小 baseSize
})
module.exports = {
  css: {
    loaderOptions: {
      postcss: {
        plugins: [
          postcss
        ]
      }
    }
  }
}

在 App.vue 里的 mounted() 写

// 基准大小   1rem为16px
const baseSize = 16;
// 设置 rem 函数
function setRem() {
	// 当前页面宽度相对于多宽的缩放比例，可根据自己需要修改。
	const scale = document.documentElement.clientWidth / 1920;
	// 设置页面根节点字体大小
	document.documentElement.style.fontSize = baseSize * Math.min(scale, 2) + "px";
}
// 初始化
setRem();
// 改变窗口大小时重新设置 rem
window.onresize = function() {
	setRem();
};