lib-flexible vue项目（移动端适配）-CSDN博客

本文链接：https://blog.csdn.net/qq_38372917/article/details/103764825

本文详细介绍如何使用lib-flexible和px2rem-loader进行移动端项目的屏幕适配。包括安装配置步骤，适用于vue-cli2.x和vue-cli3.x的不同配置方法。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

移动端适配步骤

1.安装lib-flexible(npm install lib-flexible --save-dev)

2.在main.js 中引入lib-flexible(import 'lib-flexible') //px2rem自适应

3.安装px2rem-loader(npm install px2rem-loader --save-dev)

4.配置px2rem-loader

①vue-cli 2.x

②vue-cli 3.x

2.x 步骤：

在build/utils.js中,找到exports.cssLoaders，作出如下修改：

const px2remLoader = {
    loader: 'px2rem-loader',
    options: {
        remUint: 75 // 以设计稿750为例， 750 / 10 = 75
    }
}

继续找到generateLoaders中的loaders配置，作出如下配置：

// 注释掉这一行
// const loaders = options.usePostCSS ? [cssLoader, postcssLoader] : [cssLoader]
// 修改为
const loaders = [cssLoader, px2remLoader]
 
if (options.usePostCSS) {
  loaders.push(postcssLoader)
}

重新npm run dev

3.x步骤：

在项目根目录新建文件vue.config.js，添加如下代码后并npm run dev

module.exports = {
    css: {
        loaderOptions: {
            css: {},
            postcss: {
                plugins: [
                    require('postcss-px2rem')({
                        // 以设计稿750为例， 750 / 10 = 75
                        remUnit: 75
                    }),
                ]
            }
        }
    },
};