vue-cli3脚手架配置px2rem适配方案

安装

npm i lib-flexible --save
npm install px2rem-loader

引入

进入 main.js

import 'lib-flexible/flexible'

进入index.html

<meta name="viewport" content="width=device-width, initial-scale=1.0">

根目录新建 vue.config.js 文件

复制如下代码， 重启， 搞定

// vue.config.js
module.exports = {
  chainWebpack: config => {
    config.module
      .rule('css')
        .test(/\.css$/)
        .oneOf('vue')
        .resourceQuery(/\?vue/)
        .use('px2rem')
          .loader('px2rem-loader')
          .options({
            remUnit: 75
          })
  }
}