参考资料

1.基于vue-cli配置移动端自适应
2.vue.js移动端配置flexible.js

源头

前期弄好了vue的大概，要开始写静态页面，按照正常流程，我需要些css，html，但是大家都知道，移动端页面和电脑端不一样，需要适配，打算直接引用flexible.js，但是实际上我还不知道怎么引用。所以百度出了上述的参考资料，达到我的目的。

步骤

第一，配置 flexible

安装lib-flexible --在命令行中运行如下安装

npm install lib-flexible --save

引入lib-flexible --在命令行中安装完成之后，需要在项目中引入lib-flexible

引入地址：项目入口文件中main.js
引入方式：import 'lib-flexible'

添加meta标签 --在项目根目录index.html中添加meta

引入lib-flexible.js后，我们就能愉快的适配啦！但是不要忘记，我们在写css的时候，在看设计稿的时候，习惯是用px作为单位的，所以，下一步，我们需要把px转换rem在写入样式中。。。

根据这次的百度，我才只有有px2rem这个工具；使用的是webpack的loader：px2rem-loader

第二，px转rem

安装px2rem-loader

在命令行中运行如下安装

npm install px2rem-loader --save-dev

配置px2rem-loader

1.配置地点：

配置地点

2.配置：我们只需在 cssLoader 后再加上一个 px2remLoader 即可，px2rem-loader 的 remUnit 选项意思是 1rem=多少像素，结合 lib-flexible 的方案，我们将 px2remLoader 的 options.remUnit 设置成设计稿宽度的 1/10，这里我们假设设计稿宽为 750px。

image.png

2-1，.importLoaders:2：参考资料中有写，但是后期我去除这个的时候没有发现有什么异常。但是为了保险还是写了，估计是我还没有外部的css文件吧，，，
表示在css-loader前应用的loader的数目，默认为0；如果不加这个，@import的外部css文件将不能正常转换，如果还不行，试着调大数字。
2-2，将 px2remLoader 的 options.remUnit 设置成设计稿宽度的 1/10，这里我们假设设计稿宽为 750px。

 const px2remLoader = {
    loader: 'px2rem-loader',
    options: {
      remUnit: 75
    }
  }

3.放进 loaders 数组中

function generateLoaders (loader, loaderOptions) {
    const loaders = options.usePostCSS ? [cssLoader,postcssLoader,px2remLoader] : [cssLoader,px2remLoader]

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