基于vue配置移动端自适应

解决方案主要是依赖淘宝的一个js模块（lib-flexible）和 一个webpack的loader（px2rem-loader），最终实现在开发时，长度单位直接写px可自动转成rem（文字大小则不转），且在其他尺寸的手机屏幕都可以自适应。

第1步，在项目根目录的 index.html 中添加如下 meta
 

第2步，安装 lib-flexible 模块，命令行 npm install lib-flexible --save-dev

第3步，在main.js文件里引入该模块，代码如下：
 

import 'lib-flexible'

第4步，安装 px2rem-loader，命令行 npm install px2rem-loader --save-dev

第5步，打开build/utils.js文件，编辑代码如下：
 

const px2remLoader = {
    loader: 'px2rem-loader',
    options: {
      remUnit: 75   //设计稿的宽度 除以 10，一般设计稿的宽度都为750px
    }
}
...
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
        })
      })
    }
...

第6步，启动项目，命令行 npm run dev

到这里，自适应功能已经没问题，接着在代码中的长度单位可以直接写 px ，编译之后自动会被转成 rem。

注意：文字大小一般不用转rem，还是维持原来的 px，那么需要在最后加上   斜杆星号no星号斜杆，这样就不会被编译成rem，例如：