【经验分享】使用amfe-flexible以及px2rem-loader解决VUE移动端适配

适用环境及解决问题

适用于Vue开发的前端环境。

使用amfe-flexible以及px2rem-loader，解决移动端的适配问题。

关于px2rem中标准的配置都是在webpack中，在vue.config.js中修改不多，所以故而整理此文

一、 安装amfe-flexible

1. npm安装

npm  install -S amfe-flexible

2. 在main.js中引入

import 'amfe-flexible/index.js'

3. 修改public/index.html

    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, minimum-scale=1, user-scalable=no">

二、安装px2rem-loader

1. npm 安装

npm install px2rem-loader

2. 修改vue.config.js

module.exports = {
  chainWebpack: config => {
    config.module
      .rule("scss")
      .test(/\.scss$/)
      .oneOf("vue")
      .use("px2rem-loader")
      .loader("px2rem-loader")
      .before("postcss-loader") // this makes it work.
      .options({ remUnit: 75, remPrecision: 8 })
      .end();
  },
  devServer: {
    port: 8181,
    open: false
  }
};

配置成功

本文完。