vue 移动端适配 amfe-flexibl

vue 移动端适配 amfe-flexibl

首先下载:

npm install  px2rem-loader --save

npm install amfe-flexible --save
main.js引入:

import Vue from ‘vue‘
import App from ‘./App‘
import router from ‘./router‘



// rem h5 适配
import ‘amfe-flexible/index.js‘

Vue.config.productionTip = false


/* eslint-disable no-new */
new Vue({
  el: ‘#app‘,
  router,
  components: { App },
  template: ‘<App/>‘
})

 
build文件夹下的utils.js:
exports.cssLoaders 中添加:

const px2remLoader = {
    loader: ‘px2rem-loader‘,
    options: {
      remUnit: 75
    }
  }
const loaders = options.usePostCSS ? [cssLoader, postcssLoader] : [cssLoader]
改为:

const loaders = options.usePostCSS ? [cssLoader, postcssLoader,px2remLoader] : [cssLoader,px2remLoader]

 

关于1px转化问题: 1px转化rem后有些手机上显示模糊或不显示,解决办法:将px大写,即1px写为1PX

 

原文地址:https://www.jianshu.com/p/4fe772c49a37

vue 移动端适配 amfe-flexibl

上一篇:VUE:axios接收后端文件流并下载文件


下一篇:es5和es6中Eapp.js的用法