解决vue@cli 5版本使用postcss-px-to-viewport适配element-ui的问题

针对 vue@cli 5 版本使用 postcss-px-to-viewport 适配 element-viewport 和 postcss-viewport-units 插件：

npm install postcss-px-to-viewport postcss-viewport-units --save-dev

2. 在项目根目录下创建 postcss.config.js 文件，并添加以下代码：

module.exports = {
  plugins: {
    'postcss-px-to-viewport': {
      viewportWidth: 375,   // 视窗的宽度，对应设计稿的宽度
      unitPrecision: 3,     // 指定 `px` 转换为视窗单位值的小数位数
      viewportUnit: 'vw',   // 指定需要转换成的视窗单位，建议使用 vw
      selectorBlackList: ['.ignore', '.hairlines'],  // 指定不转换为视窗单位的类
      minPixelValue: 1,     // 小于或等于 `1px` 不转换为视窗单位，你也可以设置为想要的值
      mediaQuery: false     // 允许在媒体查询中转换 `px`
    },
    'postcss-viewport-units': {}
  }
}

3. 修改 vue.config.js 文件，添加以下代码：

const path = require('path')

module.exports = {
  css: {
    loaderOptions: {
      postcss: {
        plugins: [
          require('postcss-px-to-viewport')({
            viewportWidth: 375,
            unitPrecision: 3,
            viewportUnit: 'vw',
            selectorBlackList: ['.ignore', '.hairlines'],
            minPixelValue: 1,
            mediaQuery: false
          }),
          require('postcss-viewport-units')({})
        ]
      }
    }
  },
  chainWebpack: config => {
    const svgRule = config.module.rule('svg')
    svgRule.uses.clear()
    svgRule.use('vue-svg-loader').loader('vue-svg-loader')
  },
  configureWebpack: {
    resolve: {
      alias: {
        '@': path.resolve(__dirname, './src')
      }
    }
  }
}

4. 修改 main.js 文件，引入 element-ui 的样式文件，并且添加以下代码：

import ElementUI from 'element-ui'
import 'element-ui/lib/theme-chalk/index.css'

// 在使用 ElementUI 前，将 px 转换成 vw
import 'lib-flexible/flexible.js'

Vue.use(ElementUI)

这样就可以使用 postcss-px-to-viewport 插件适配 element-ui 了。