vue项目PC端如何适配不同分辨率屏幕

本文为CSDN博主「楚猴修」的原创文章
原文链接：https://blog.csdn.net/weixin_43607164/article/details/100512220
我只是记录下 防止以后遇到弄丢

配置前言

项目构建：基于vue-cli3构建，使用postcss-px2rem px2rem-loader进行rem适配
实现原理：每次打包，webpack通过使用插件postcss-px2rem，帮我们自动将px单位转换成rem单位
前方有坑：UI框架部分组件使用JavaScript将css作为内联样式直接写在html标签内，打包适配时不会读取相关css,所以要配置相关样式，在style中需要" !important "进行样式覆盖。

第一步，安装postcss-px2rem及px2rem-loader

打开命令行工具，输入以下指令安装插件(当然用淘宝镜像cnpm安装会更快)

npm install postcss-px2rem px2rem-loader --save

第二步，在根目录src中新建utils目录下新建rem.js等比适配文件

复制以下代码