vue/cli3.0配置px转rem,vw/vh

项目又在vue/cli3.0做移动端，像配置一下px转rem,以及vw。方便项目的开发，记录一下配置的内容，下面就是配置内容：

1.使用pxtorem px转成rem

npm install lib-flexible 或者 yarn add lib-flexible 

让网页根据设备dpr和宽度，利用viewport和html根元素的font-size配合rem来适配不同尺寸的移动端设备

在main.js引入中：import 'lib-flexible/flexible.js'

1.1  npm install postcss-pxtorem 或者 yarn add postcss-pxtorem

在package.json内，在postcss内添加：

"postcss": {
   "plugins": {
    "autoprefixer": {},
    "postcss-pxtorem": {
           "rootValue": 75, // 设计稿宽度的1/10,（JSON文件中不加注释，此行注释及下行注释均删除）

           "selectorBlackList": [ "vant" ],//忽略转rem项，列表中不进行转rem

           "propList":["*"] // 需要做转化处理的属性，如`hight`、`width`、`margin`等，`*`表示全部
        }
    }
},

1.2  或者使用 npm install --save-dev postcss-loader postcss-px2rem

 

在vue.config.js中配置

module.exports = {
        css: {
        loaderOptions: {
               css: {
                       // options here will be passed to css-loader
               },
         postcss: {
                    // options here will be passed to postcss-loader
                    plugins: [require('postcss-px2rem')({
                              remUnit: 75
                    })]
               }
          }
      }
}

 

2.使用 postcss-px-to-viewport  注意：移动端用方便，不过在pc端会出新字体过大的现象

npm install  postcss-px-to-viewport 或者 yarn add  postcss-px-to-viewport 

package.json中，在postcss中添加代码：

 

"postcss": {
    "plugins": {
    "autoprefixer": {},
    "postcss-px-to-viewport": {
         "viewportWidth": 750,
         "minPixelValue": 1
        }
    }
},