vue移动端项目使用rem

下载npm install lib-flexible --save

在main.js引入import 'lib-flexible'

使用px2rem-loader自动将css中的px转换成rem--npm install px2rem-loader --save-dev

打开build/utils.js文件，找到exports.cssLoaders方法，在里面添加如下代码

constpx2remLoader= {

loader:'px2rem-loader',

options:{

remUint:75

}

}

修改generateLoaders方法中的loaders

constloaders=options.usePostCSS? [cssLoader,postcssLoader] : [cssLoader,px2remLoader]

然后重新npm run dev，打开控制台可以看到代码中的px已经被转成了rem

如果在.vue文件style中的某一行代码不希望被转成rem，只要在后面写上注释 /* no*/就可以了  例如 p{border:1px solid #0094ff;/* no */}

如果在.vue文件style中的某一行代码希望被转成适配但是以px显示，只要在后面写上注释 /* px */就可以了  例如 p{border:1px solid #0094ff;/* px */}