vue vue-cli @vue/cli将px转换成rem单位配置(flexible,px2rem)

最新推荐文章于 2025-05-26 08:21:02 发布

娄笙悦

最新推荐文章于 2025-05-26 08:21:02 发布

阅读量7.7k

点赞数 2

CC 4.0 BY-SA版权

分类专栏： bug修复 vue 方法-技巧与案例

版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。

本文链接：https://blog.csdn.net/weixin_41424247/article/details/80867351

本文介绍了在Vue CLI项目中如何配置px转rem，包括安装flexible和px2rem插件，修改main.js和index.html，以及在vue.config.js中设置转换规则。此外，还提供了处理1px边框问题和字体单位的建议，以及相关参考链接。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

序

与原来的vue-cli 2.x版本不同的是：如果使用最新版本的@vue/cli初始化vue项目时，通常看不到webpack的配制文件。而在原来的2.x版本，我们可以在utils.js中轻松配制px2rem相关配置。为了解决这个问题，我研究了一下vue-cli的官方文档，发现我们仍然可以像以往那样配制。具体步骤如下：

1. 安装

安装lib-flexible：

npm install --save lib-flexible

安装postcss-loader和postcss-px2rem：

npm install --save-dev postcss-loader postcss

最低0.47元/天解锁文章

200万优质内容无限畅学

评论 5

被折叠的条评论为什么被折叠?

到【灌水乐园】发言

查看更多评论

添加红包

成就一亿技术人!

hope_wisdom

发出的红包

实付元

使用余额支付

点击重新获取

扫码支付

钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。