vue项目配置rem移动端适配

一、项目介绍

脚手架CLI：@vue/cli
Vue版本：2.6.11
移动UI组件库：Vant#2.10.14
CSS预处理器：sass

二、配置lib-flexible插件

下载插件

npm i -D lib-flexible

导入：在src/main.js中使用

import 'lib-flexible'

三、项目配置

安装postcss-px2rem和postcss-loader插件依赖

npm i -D postcss-px2rem postcss-loader

提示： 如果项目使用了第三方的UI组件库（文本以VantUI为例），而又不想让组件库的px转为rem，则需要安装postcss-px2rem-exclude。

npm i -D postcss-px2rem-exclude

在vue.config.js中配置，如果没有此文件，在根目录新建即可。

// vue.config.js
module.exports = {
    
    
  // ...
  css: {
    
    
    sourceMap: true,
    loaderOptions: {
    
    
      css: {
    
    },
      postcss: {
    
    
        plugins: [
          /* rem适配忽略文件目录 */
          require('postcss-px2rem-exclude')({
    
    
            remUnit: 75,  // 参数 1
            exclude: /node_modules|vant/i,  // 参数 2
          }),
        ],
      },
    },
  },
  // ...
}