移动端精准还原设计稿解决方法

适用vuecli3.x

step 1 ：安装插件下列插件

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

step 2: 在main.js中引入lib-flexible 

import 'lib-flexible/flexible'

step 3：前往public文件下的index.html中加入下面这句话

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

step 4:创建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 //此处填写设计图的尺寸大小
          })
  }
}

step 5: 重启收工