原文网址：https://segmentfault.com/a/1190000011883121#articleHeader2
基于vue-cli配置手淘的lib-flexible + rem，实现移动端自适应
没接触过flexible的建议先看看大漠的这篇文章这样你才会知道长度为什么用rem，而字体要用px
-
安装flexible
npm install lib-flexible --save-
引入flexible
在项目入口文件main.js中添加如下代码，引入flexible
import ‘lib-flexible‘-
px 转 rem
使用 webpack 的 px2rem-loader,自动将px转换为rem
-
安装px2rem-loader
npm install px2rem-loader --save-dev-
配置px2rem-loader
在vue-cli生成的文件中,找到以下文件 build/utils.js,如下图添加配置
关于importLoaders：如若有疑问，请参考webpack深入与实战4-4
2017.12.8更新说明：是否需要配置importLoaders，可参考最底部的说明。
-
px2rem 用法
安装px2rem后，再使用px上有些不同，大家可以参考px2rem官方介绍，下面简单介绍一下。
直接写px，编译后会直接转化成rem ---- 除开下面两种情况，其他长度用这个
在px后面添加/*no*/，不会转化px，会原样输出。 --- 一般border需用这个
在px后面添加/*px*/,会根据dpr的不同，生成三套代码。---- 一般字体需用这个
示例代码
编译前（自己写的代码）
.selector {
width: 150px;
height: 64px; /*px*/
font-size: 28px; /*px*/
border: 1px solid #ddd; /*no*/
}编译后（打包后的代码）
.selector {
width: 2rem;
border: 1px solid #ddd;
}
[data-dpr="1"] .selector {
height: 32px;
font-size: 14px;
}
[data-dpr="2"] .selector {
height: 64px;
font-size: 28px;
}
[data-dpr="3"] .selector {
height: 96px;
font-size: 42px;
}-
重启项目，就可以愉快的用设计稿上的px了。
注意：坑
- 不能在index.html的头部加 name 为 viewport 的 meta 标签，flexible会自动为我们添加！
更新：对外部引入css，px2rem能不能转换rem问题
2017.12.8更新：在实际运用中发现对于外部引入的css文件，有时候px2rem能正常转换，有时候又不能转换，到底是什么原因呢？试验了三种不同的css引入情况，发现第一种能正常转换，二三不能正常转换，至于原因，由于才疏学浅，还是不懂，求大神解答三种引入方式的区别。
如果明白了这些方法，就没必要再配置cssLoader的importLoaders了，因为下面的方法更容易控制外部引入的css是否需要转rem，而更改importLoaders就控制不了了，它会强制转换。
<style src=‘../assets/style.css‘>
/* px2rem能正常转换 */
</style><style>
/* px2rem不能正常转换 */
@import ‘../assets/style.css‘;
</style><style>
/* px2rem不能正常转换 */
@import url(‘../assets/style.css‘);
</style>
‘use strict‘
const path = require(‘path‘)
const config = require(‘../config‘)
const ExtractTextPlugin = require(‘extract-text-webpack-plugin‘)
const packageConfig = require(‘../package.json‘)
exports.assetsPath = function (_path) {
const assetsSubDirectory = process.env.NODE_ENV === ‘production‘
? config.build.assetsSubDirectory
: config.dev.assetsSubDirectory
return path.posix.join(assetsSubDirectory, _path)
}
exports.cssLoaders = function (options) {
options = options || {}
const cssLoader = {
loader: ‘css-loader‘,
options: {
sourceMap: options.sourceMap,
importLoaders:5 //在css-loader前应用的loader的数目，默认为0.
//如果不加这个 @import的外部css文件将不能正常转换
//如果不行 请试着调大数字
//更改后必须调大数字 否则无效
}
}
const px2remLoader={
loader:‘px2rem-loader‘,
options:{
remUnit:75 //设计稿的1/10 ，我们假设设计稿是750px
}
}
const postcssLoader = {
loader: ‘postcss-loader‘,
options: {
sourceMap: options.sourceMap
}
}
// generate loader string to be used with extract text plugin
function generateLoaders (loader, loaderOptions) {
const loaders = options.usePostCSS ? [cssLoader, postcssLoader] : [cssLoader,px2remLoader] //添加px2remLoader
if (loader) {
loaders.push({
loader: loader + ‘-loader‘,
options: Object.assign({}, loaderOptions, {
sourceMap: options.sourceMap
})
})
}
// Extract CSS when that option is specified
// (which is the case during production build)
if (options.extract) {
return ExtractTextPlugin.extract({
use: loaders,
fallback: ‘vue-style-loader‘
})
} else {
return [‘vue-style-loader‘].concat(loaders)
}
}
// https://vue-loader.vuejs.org/en/configurations/extract-css.html
return {
css: generateLoaders(),
postcss: generateLoaders(),
less: generateLoaders(‘less‘),
sass: generateLoaders(‘sass‘, { indentedSyntax: true }),
scss: generateLoaders(‘sass‘),
stylus: generateLoaders(‘stylus‘),
styl: generateLoaders(‘stylus‘)
}
}
// Generate loaders for standalone style files (outside of .vue)
exports.styleLoaders = function (options) {
const output = []
const loaders = exports.cssLoaders(options)
for (const extension in loaders) {
const loader = loaders[extension]
output.push({
test: new RegExp(‘\\.‘ + extension + ‘$‘),
use: loader
})
}
return output
}
exports.createNotifierCallback = () => {
const notifier = require(‘node-notifier‘)
return (severity, errors) => {
if (severity !== ‘error‘) return
const error = errors[0]
const filename = error.file && error.file.split(‘!‘).pop()
notifier.notify({
title: packageConfig.name,
message: severity + ‘: ‘ + error.name,
subtitle: filename || ‘‘,
icon: path.join(__dirname, ‘logo.png‘)
})
}
}
