适用环境及解决问题
适用于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
}
};
配置成功
本文完。
