Vue项目中自动将px转换为rem

Posted 2023-03-12

参考技术A 在vue脚手架开发移动端的项目的时候，我们需要适配不同的机型，如果想将设计稿量多少就写多少就需要进行一些配置了

1.创建vue的脚手架项目（这一步是默认你安装了webpack和cli的相关内容）

vue init webpack (项目名称，项目名称的名字需要英文小写)

2. 安装 lib-flexible,并且在main.js里面引入

npm install lib-flexible --save

import ‘lib-flexible’（在main.js里引入）

3. 安装 px2rem-loader

npm i px2rem-loader --save-dev

3. 安装 px2rem-loader

npm i px2rem-loader --save-dev

4.配置px2rem-loader

6.完成之后重启项目就可以将px转化为rem了，需要注意的是在配置时需要根据设计图给的是几倍的图来进行配置

options：

remUnit:37.5 // 根据自己的需求自己计算需要的数值，这个是2倍图 三倍图是75



根据https://blog.csdn.net/weixin_34113237/article/details/93531176的网站进行理解编译