VUE中使用rem lib-flexible
- 安装lib-flexible
npm i lib-flexible --save
- 在项目入口文件main.js中引入lib-flexible
import 'lib-flexible/flexible.js'
- 在项目根目录的index.html 头部删除自动生成的meta标签, lib-flexible会根据屏幕自动生成相对于的meta标签
// 删除
<meta name="viewport" content="width=device-width, initial-scale=1.0">
- 安装px2rem-loader
在实际的开发中,使用flexible插件时 会自动把px转换成rem单位。在vue-cli中安装过lib-flexible之后 ,将px转换成rem,我们将使用px2rem这个工具,
npm install px2rem-loader
- 配置px2rem-loader
修改build/utils.js
, 在cssLoader变量中
const cssLoader = {
loader: 'css-loader',
options: {
sourceMap: options.sourceMap,
impo