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*/就可以了