vue配置移动端自适应

写作背景

最近在做移动H5开发，屏幕开始使用px做适配，不太好用，现在改为rem，各种百度做了自适应匹配，教程如下！勿喷、勿喷，各位觉得哪里不合适需要改进给我留言哦！

配置教程

安装flexible

命令：cnpm install lib-flexible --save

安装px2rem-loader

命令：cnpm install px2rem-loader --save-dev

main.js中引入flexible

import 'lib-flexible'

4、配置px2rem-loader，打开build/utils.js，如下配置：

const cssLoader = {
    loader: 'css-loader',
    options: {
        sourceMap: options.sourceMap,
        importLoaders: 2
    }
};

const px2remLoader = {
    loader: 'px2rem-loader',
    options: {
        remUnit: 75
    }
};

// generate loader string to be used with extract text plugin
function generateLoaders(loader, loaderOptions) {
    const loaders = options.usePostCSS ? [cssLoader, postcssLoader, px2remLoader] : [cssLoader, 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',
            publicPath: '../../'
        })
    } else {
        return ['vue-style-loader'].concat(loaders)
    }
}

meta标签配置

不能在index.html的头部加 name 为 viewport 的 meta 标签（否则字体大小会固定为12px），flexible会自动为我们添加！