Vue移動端適合amfe-flexible

1、まずダウンロード:

npm install  px2rem-loader --save

npm install amfe-flexible --save

2、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: ''
})

3、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]

1 px転化問題について:1px転化rem後、一部の携帯電話にはぼやけているか表示されていないか、解決方法:pxを大文字、すなわち1pxを1PXと書く