项目原地址参考这里

插件安装

1# 安装适配插件lib-flexible
2npm i lib-flexible -S
3# 安装px转rem插件
4npm i px2rem-loader -S

文件引入

在vue的入口文件main.js内引入lib-flexible

import 'lib-flexible/flexible.js'

添加meta标签

在入口index.html内添加视口修饰meta

<meta name="viewport" content="width=device-width, initial-scale=1.0">

配置utils

在build/utils.js文件内： 在cssLoaders里面添加px2remLoader方法用于将px转换为rem

1const px2remLoader = { 
2    loader: 'px2rem-loader', 
3    options: { 
4      'remUnit':75,'baseDpr':2    // 设计稿width为750，因此这里是75
5    } 
6  }

接下来将px2remLoader方法添加到generateLoaders的loaders数组内

const loaders = [cssLoader, px2remLoader]

使用方法

以上几个步骤配置完毕以后，重启服务，然后组件中写尺寸单位就可以直接写px，具体值直接按照设计稿来做就ok