vue项目配置rem移动端适配

Posted 2022-05-12 老张在线敲代码

一、项目介绍

脚手架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
          ),
        ],
      ,
    ,
  ,
  // ...