vue移动端适配

移动端适配:

 一，安装 lib-flexible：

npm i lib-flexible --save

 二，main.js中引入lib-flexible：

import 'lib-flexible/flexible'

 三，安装px2rem-loader：

npm i px2rem-loader

四 ,  配置px2rem-loader  build / utils.js 配置

 const cssLoader = {
    loader: 'css-loader',
    options: {
      sourceMap: options.sourceMap
    }
  }
  const px2remLoader = {  //配置px2remLoader
     loader:'px2rem-loader',
     options:{
       remUnit:75
     }
  }
  // generate loader string to be used with extract text plugin
  function generateLoaders(loader, loaderOptions) {
    const loaders = options.usePostCSS ? [cssLoader,px2remLoader] : [cssLoader,px2remLoader] //加入px2remLoader

    if (loader) {
      loaders.push({
        loader: loader + '-loader',
        options: Object.assign({}, loaderOptions, {
          sourceMap: options.sourceMap
        })
      })
    }

    // Extract CSS when that option is specified
    // (which is the case during production build)
    if (options.extract) {
      return ExtractTextPlugin.extract({
        use: loaders,
        fallback: 'vue-style-loader'
      })
    } else {
      return ['vue-style-loader'].concat(loaders)
    }
  }

 

喜欢上方小程序,需要源码的,私信小编留下邮箱。