vue-cli3中通过配置lib-flexible和post-p

新的vue-cli脚手架相对于上一版本已经精简了很多，将很多的配置文件给隐藏了起来，因此很多的配置都需要在自定义配置文件vue.config.js中进行，而本文则是将px2rem配置到postcss.config.js中。

1 安装lib-flexible

通过yarn或npm都可以

npm i lib-flexible --save

//在入口文件main.js中进行引入

import 'lib-flexible/flexible.js'

2 安装px2rem

npm i postcss-px2rem -D

//在postcss.config.js中进行配置

module.exports = {

    plugins: {

        autoprefixer: {},

        "postcss-px2rem": {

            remUnit: 37.5  //转换为rem的基准px

            //其他配置选项自行查文档

        }

    }

}

但是因为lib-flexible是动态添加dpr的，因此许多第三方ui库会产生错乱，因此推荐使用postcss-px2rem-exclude，它可以忽略不进行转换的文件

···

//配置如下

module.exports = {

plugins: {

    autoprefixer: {},

    "postcss-px2rem-exclude": {

        remUnit: 37.5,

        exclude: /node_modules|folder_name/i

    }

}

}

···

写在后面，flexible已经不再维护，并且只适应手机端，如需要适配平板的大屏幕设备需要修改flexible源代码。