在使用Vue-cli3.X构建Vue项目时，我们可能会遇到一些与以前版本不同的问题。比如，当你想在项目中使用px2rem库来将设计稿中的px单位转换为rem单位，以适应不同分辨率的屏幕时，会发现原有的方法不再适用。
在Vue-cli2.X版本中，我们通常会在config文件夹下的index.js里配置build对象，设置postcss插件来集成px2rem。但在Vue-cli3.X版本中，这一过程发生了变化。由于Vue-cli3.X移除了build和config文件夹，所有的配置项都统一到了一个vue.config.js文件中。由于这个文件不会自动生成，我们需要在项目的根目录手动创建这个文件。
在vue.config.js文件中，我们配置postcss-loader以使用px2rem插件。这里需要注意的是，px2rem的配置参数从原来的remUnit改为了rootValue。举例来说，如果你的设计稿是750px宽，那么在配置px2rem时，应该设置rootValue为75。这样做是因为rootValue参数决定了px转换为rem的基本值。
除了vue.config.js配置外，还需要注意设备屏幕的差异。现代移动设备屏幕的尺寸多种多样，有的设备使用了视网膜屏技术，这种屏幕的DPR（Device Pixel Ratio，设备像素比）会是普通屏幕的2倍或更高。因此，设置一个适应不同设备的基准值变得十分关键。为了处理不同设备的屏幕尺寸，需要在项目的src/plugins目录下创建一个rem.js文件，利用flexible.js库来动态设置html的font-size值。
在rem.js文件中，我们通过检测meta标签中的viewport信息或flexible标签信息来确定当前设备的缩放比例和像素比。然后，基于检测到的缩放比例，计算出一个合适的基准值（rootValue），从而保证不同设备下页面布局的适配性。
安装px2rem插件的命令是npm install postcss-px2rem --save-dev。安装完毕后，在vue.config.js中配置px2rem插件，并设置好rootValue和其他参数。
要确保在使用px2rem时，能够适应不同设备的屏幕分辨率，可能还需要通过meta标签中的viewport属性来控制布局的缩放。例如，当页面加载时，确保页面根据设备屏幕特性被正确缩放。
总结一下，在Vue-cli3.X中使用px2rem，需要：
1. 在项目根目录创建vue.config.js文件并进行配置；
2. 使用rootValue来替代remUnit参数；
3. 在rem.js文件中动态计算并设置html的font-size，以适应不同设备的屏幕尺寸；
4. 通过viewport meta标签控制布局的缩放。
通过上述步骤，可以在Vue-cli3.X项目中顺利使用px2rem，解决设计稿在不同设备间的适配问题。这些配置和处理方式对于追求项目搭建简洁高效和现代前端开发体验的开发者来说，具有很高的参考价值。
