vue使用flexible和px2rem實現移動端適配

首先下載flexible.js和px2rem

npm install px2rem-loader

對webpack進行配置。進入build文件夾對utils.js中的postcssLoader作以下修改

const postcssLoader = {
    loader: 'postcss-loader',
    options: {
      sourceMap: options.sourceMap,
      plugins: function () {
        return [
          require('postcss-px2rem')({remUnit: 75})
        ]
      }
    }
  }

而後在vue-loader.conf.js中的module.exports裏添加

postcss: [
    require('postcss-px2rem')({remUnit: 75})
  ]

remUnit後的數字爲設計稿寬度的十分之一
以後在全局引入flexible.js,在main.js加入

import '../static/js/flexible.js';