vue cli3中配置使用 rem

第一部分 项目中引入lib-flexible

一、项目中安装lib-flexible

npm install lib-flexible --save

二、在项目的入口main.js文件中引入lib-flexible

import 'lib-flexible'

通过要以上两步，就完成了在vue项目使用lib-flexible来解决移动端适配了。

第二部分：使用postcss-px2rem-exclude自动将css中的px转换成rem

这个插件主要是目的是让第三方UI库的的样式大小不进行转换。

一、安装postcss-px2rem-exclude

npm install postcss-px2rem-exclude --save

二、配置 postcss-px2rem-exclude

在项目的根目录下找到文件postcss.config.js，在里面添加如下代码

module.exports = {
  "plugins": {
    // to edit target browsers: use "browserslist" field in package.json
    "postcss-import": {},
    "autoprefixer": {},
    "postcss-px2rem-exclude": {  // 添加的代码
      remUnit: 75,
      exclude: /node_modules|folder_name/i // 忽略node_modules目录下的文件，注意这里值不要写成字符串，否则引入的外部UI也会转rem
    }
  }
}

然后重新npm run dev，打开控制台可以看到代码中的px已经被转成了rem

注意：

    1.此方法只能将.vue文件style标签中的px转成rem，不能将script标签和元素style里面定义的px转成rem

    2.如果在.vue文件style中的某一行代码不希望被转成rem，只要在后面写上注释 /* no*/就可以了