因?yàn)檫@是2.0的腳手架跟3.0的配置有所區(qū)別岩调，所以請(qǐng)3.0版本的移步這里
vue-cli3.0移動(dòng)端適配

首先我們需要引入px2rem-loader這個(gè)依賴

它的作用是將你寫(xiě)好的px直接轉(zhuǎn)換成rem，這樣你可以正常的按設(shè)計(jì)稿去寫(xiě)px，但是實(shí)際到頁(yè)面上就成了rem

轉(zhuǎn)換前

轉(zhuǎn)換后

首先下載px2rem-loader

npm install px2rem-loader --save

然后配置插件

然后找到文件目錄下 build/utils.js
在cssloaders方法下引入px2rem-loader

 const px2remLoader = {
  loader: 'px2rem-loader',
  options: {
    remUnit: 7.5//設(shè)計(jì)稿寬度/10
  }
};
//然后在generateLoaders方法中引入px2remloader

const loaders = [cssLoader, px2remLoader];//添加px2rem 插件

然后貼下完整配置

exports.cssLoaders = function (options) {
  options = options || {}

  const cssLoader = {
    loader: 'css-loader',
    options: {
      sourceMap: options.sourceMap
    }
  }

  const postcssLoader = {
    loader: 'postcss-loader',
    options: {
      sourceMap: options.sourceMap
    }
  }
   /*
    這里是需要引入的px2rem-loader
   */
   var px2remLoader = {
      loader: 'px2rem-loader',
      options: {
        remUnit: 7.5//設(shè)計(jì)稿寬度/10
      }
    };
  // generate loader string to be used with extract text plugin
  function generateLoaders (loader, loaderOptions) {
    // const loaders = options.usePostCSS ? [cssLoader, postcssLoader] : [cssLoader]
    var loaders = [cssLoader, px2remLoader];//添加px2rem 插件
    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',
        publicPath: '../../'
      })
    } else {
      return ['vue-style-loader'].concat(loaders)
    }
  }

  // https://vue-loader.vuejs.org/en/configurations/extract-css.html
  return {
    css: generateLoaders(),
    postcss: generateLoaders(),
    less: generateLoaders('less'),
    sass: generateLoaders('sass', { indentedSyntax: true }),
    scss: generateLoaders('sass'),
    stylus: generateLoaders('stylus'),
    styl: generateLoaders('stylus')
  }
}

然后需要在index.html中加入適配代碼

<script>
fnResize()
window.onresize = function () {
  fnResize()
}
function fnResize() {
  var deviceWidth = document.documentElement.clientWidth || window.innerWidth;
  document.documentElement.style.fontSize = (deviceWidth / 70) + 'px';//這個(gè)70可以根據(jù)實(shí)際情況修改
}
</script>