vue移动端配置flexible实现rem布局

vue移动端配置flexible实现rem布局

---

vue2

1. 安装依赖

-D 等同于--save-dev    开发依赖
-S 等同于--save       项目必须的依赖(一个要打包到生产环境的安装包)

npm i lib-flexible --save-dev

npm install px2rem-loader --save-dev

2. 引入lib-flexible

import 'lib-flexible/flexible'

3. 配置px2rem-loader
   在build文件中找到util.js，将px2rem-loader添加到cssLoaders中，如：

const cssLoader = {
    loader: 'css-loader',
    options: {
      minimize: process.env.NODE_ENV === 'production',
      sourceMap: options.sourceMap
    }
  }
  const px2remLoader = {
    loader: 'px2rem-loader',
    options: {
      remUnit: 75
    }
  }

4. 在generateLoaders方法中添加px2remLoader

function generateLoaders (loader, loaderOptions) {
    const loaders = [cssLoader,px2remLoader]
    if (loader) {
      loaders.push({
        loader: loader + '-loader',
        options: Object.assign({}, loaderOptions, {
          sourceMap: options.sourceMap
        })
      })
    }

• 完成

---

vue3

    //配置依赖
    npm i lib-flexible --save-dev
    npm i postcss-px2rem --save-dev
    
    // 在main.js里面引入
    import 'lib-flexible/flexible'
    
    //然后在vue.config.js 中配置
    css: {
    loaderOptions: {
      postcss: {
        // 这是rem适配的配置  注意： remUnit在这里要根据lib-flexible的规则来配制，如果您的设计稿是750px的，用75就刚刚好。
        plugins: [
          require("postcss-px2rem")({
            remUnit: 75
          })
        ]
      }
    }
  }

• 完成

---

以上完成之后便可以在书写css，在检查元素里面。改变成移动端调试。可以看到相应的变化。

如下

• html及css

<template>
  <div class="jd-sub">
    <div class="en">
    </div>
  </div>
</template>

<script>

export default {
  data(){
    return{

    }
  }
}
</script>

<style scoped lang='less'>
  .en{
    width: 100px;
    height: 100px;
    background: red;
    margin: 0 auto;
  }

</style>

• 调试界面