適用環(huán)境及解決問題

適用于Vue開發(fā)的前端環(huán)境。

使用amfe-flexible以及px2rem-loader，解決移動(dòng)端的適配問題。

關(guān)于px2rem中標(biāo)準(zhǔn)的配置都是在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
  }
};

配置成功

本文完。