在 vue 项目中使用 postcss-px-to-viewport 做移动端适配

下载 autoprefixer 用来给不同的浏览器自动添加相应前缀，如-webkit-，-moz-等等

npm i autoprefixer

安装 postcss-px-to-viewport

npm i postcss-px-to-viewport

根据是否需要使用include，引用不同的资源，不用github版本资源时，include属性设置无效

npm i https://github.com/evrone/postcss-px-to-viewport --save-dev

在 vue.config.js 文件里：

const pxtoviewport = require('postcss-px-to-viewport')
const autoprefixer = require('autoprefixer')

module.exports = {
  css: {
    loaderOptions: {
      postcss: {
        plugins: [
          autoprefixer(),
          pxtoviewport({
            unitToConvert: 'px',
            viewportWidth: 750,
            unitPrecision: 3,
            propList: [
              '*'
            ],
            viewportUnit: 'vw',
            fontViewportUnit: 'vw',
            selectorBlackList: [],
            minPixelValue: 1,
            mediaQuery: false,
            replace: true,
            exclude: /[\\/]node_modules[\\/]/,
            include: /[\\/]src[\\/]views[\\/]modulesApp[\\/]/
          })
        ]
      }
    }
  },
}

解释：

设定750px转化为100vw

exclude: /[\\/]node_modules[\\/]/ ：排除node_modules下的所有文件

include: /[\\/]src[\\/]views[\\/]modulesApp[\\/]/ ：给modulesApp下的所有文件做适配

如果使用了include配置项，就不需要使用exclude配置项