vue配置px2rem适配移动端（自动将px转rem）vue-cli2 版本

最新推荐文章于 2025-04-08 16:40:59 发布

王2疼

最新推荐文章于 2025-04-08 16:40:59 发布

阅读量742

点赞数

分类专栏：前端 vue学习文章标签： vue 适配

本文链接：https://blog.youkuaiyun.com/weixin_39228870/article/details/105446993

版权

前端同时被 2 个专栏收录

12 篇文章

订阅专栏

vue学习

11 篇文章

订阅专栏

本文详细介绍了如何在Vue CLI2项目中配置px2rem，实现响应式布局。步骤包括安装px2rem-loader和lib-flexible，修改utils.js以添加px2remLoader，以及在main.js中引入lib-flexible。同时，提供了适配PC端的方法。

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

vue配置px2rem（vue-cli2 版本）

1 安装

npm install px2rem-loader lib-flexible –save

2 在项目入口文件main.js中引入lib-flexible

import 'lib-flexible/flexible'

3 在build下的 utils.js中为generateLoaders 添加 px2remLoader

const px2remLoader = {
    loader: 'px2rem-loader',
    options: {
      remUnit: 75//设计稿宽度/10
    }
  };

在这里插入图片描述
== 因为本人没有使用postcss 所以直接改了那一行代码

备注：
如果是适配pc端，需到node_modules文件夹下找到lib-flexible中的flexible.js文件修改宽度（因为默认是适配移动端的
在这里插入图片描述
修改为

注：因为这是在node_modules文件夹下更改的代码，不在本地配置的话，web实现可能会出现变形
可以将该更改过后的js文件直接复制到自己的文件夹下，并在main.js中引入
（操作过后可以将之前在main.js引入flexible删掉，package.json中的lib-flexible也可以删掉，因为已经存在本地了）