vue 中移动端自适应

一、背景

在使用 vue-cli 构建移动端项目的时候，移动端自适应应该是很常见的需求了，之前见过有直接在 html 文件head 标签内添加 rem 设置的，这里分享一下使用淘宝的 lib-flexible 和 px2rem-loader 配合 vue-cli 构建的项目配置移动端自适应。

二、前期准备

• 安装依赖

npm i lib-flexible px2rem-loader -S

• 引入 lib-flexible
  在项目入口文件 main.js 中引入：

import 'lib-flexible'

• 添加 meta 标签（可选）
  一般 vue-cli 构建的项目都是自动添加了移动端 meta 标签的，如果没有，在 index.html 文件的 head 标签内加上：

<meta name="viewport" content="width=device-width, initial-scale=1.0">

三、配置

在 vue-cli 生成的项目中，vue-loader 的 options 和其他样式文件的 loader 最终都是由 build/untils.js 文件里的一个方法生成，我们只需要在里面加上 px2rem-loader 就行：

1. 打开 untils.js 文件：

   
   codepng1.png
2. 在其中找到 cssLoaders 方法，在其中加上 px2rem-loader 的配置：

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

其中 remUnit:75 属性是指 1rem=75 像素的意思，因为 lib-flexible 是设定1rem为屏幕宽度的1/10，所以我们这应该将 remUnit 属性的值设置为设计稿的 1/10，我们这里假设使用标准稿宽为 750px，则 remUnit:75；

3. 将 px2remLoader 放进 generateLoaders 数组：

function generateLoaders (loader, loaderOptions) {
    const loaders = options.usePostCSS ? [cssLoader, postcssLoader] : [cssLoader, px2remLoader];
...
// 如果使用 postcss 的话在 postcssLoader 后面也加上 px2remLoader

配置完成！

号外！

现在因为越来越多浏览器对 viewport 单位的兼容，lib-flexible 这个过渡方案存在一点问题，所以后期建议大家开始使用 viewport 来替代此方案，vw 的兼容方案可参阅 如何在Vue项目中使用vw实现移动端适配