vue移动端h5适配解决方案(lib-flexible+px2rem-loader)

先介绍用到的两个工具：
px2rem-loader：将css中的px转为rem单位，用了它就不用自己计算rem值了
lib-flexible：根据设备宽度，修改根元素html的font-size，以适配不同终端

配置

1. 安装1：npm i px2rem-loader --save -dev
2. 安装2：npm i lib-flexible --save
3. 配置1：入口文件main.js中引入：import 'lib-flexible/flexible.js'
4. 配置2：
   build/utils.js中：

// exports.cssLoaders内增加：
 const px2remLoader = {
    loader: 'px2rem-loader',
    options: {
        remUnit: 75 // 设计稿宽度/10
    }
 }
// function generateLoaders前增加：
...
 function generateSassResourceLoader() {
        var loaders = [
            cssLoader,
            postcssLoader,
            px2remLoader,
            // 'sass-loader',
            // {
            //     loader: 'sass-resources-loader',
            //     options: {
            //         resources: [
            //             path.resolve(__dirname, '../src/common/scss/variable.scss'),
            //             path.resolve(__dirname, '../src/common/scss/mixin.scss')
            //         ]
            //     }
            // }
        ]
        if (options.extract) {
            return ExtractTextPlugin.extract({
                use: loaders,
                fallback: 'vue-style-loader'
            })
        } else {
            return ['vue-style-loader'].concat(loaders)
        }
    }
...
// return中改为：
...
// sass: generateSassResourceLoader(),
// scss: generateSassResourceLoader(),
css: generateSassResourceLoader(),
...

注意事项

1.对css中文字样式增加/* px */后缀，会编译出适应不同dpr的字号，栗：

.text{
    font-size: 28px; /* px */
}
// 会被编译成如下：

    [data-dpr="1"] .text { // data-dpr是由flexible计算出来并加在html上的设备像素比
        font-size: 14px;
    }

    [data-dpr="2"] .text {
        font-size: 28px;
    }

    [data-dpr="3"] .text {
        font-size: 42px;
    }

2.对边框样式增加/* no */后缀，会保持原样，栗：

.box{
    border: 1px solid #fff; /* no */
}
// 会被编译成如下：
.box{
    border: 1px solid #fff;
}

3.对不同dpr选择不同的图片：
mixin.scss中

// 背景图片
@mixin bg-image($url) {
    background-image: url($url + "@2x.png");
    @media (-webkit-min-device-pixel-ratio: 3), (min-device-pixel-ratio: 3) {
        background-image: url($url + "@3x.png");
    }
}

参考：使用Flexible实现手淘H5页面的终端适配