【vue】使用postcss-px-to-viewport和style-vw-loader进行pc端和移动端适配，解决行内样式不能转换为vw的问题

postcss-px-to-viewport

vue-cli3中我们可以引入postcss-px-to-viewport插件

• 安装依赖：

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

• 在vue.config.js里进行配置

css: {
      loaderOptions: {
        postcss: {
            plugins: [
              require('postcss-px-to-viewport')({
                viewportWidth: 1920,
                unitPrecision: 3,
                minPixelValue: 1,
                viewportUnit: 'vw',
                selectorBlackList: ['.ignore', '.hairlines'],
                exclude: [/node_modules/]
              })
            ]
          },
     }
   }

• 或者在postcss.config.js中配置

module.exports = {
    plugins: {
        autoprefixer: {}, // 用来给不同的浏览器自动添加相应前缀，如-webkit-，-moz-等等
        'postcss-px-to-viewport': {
            unitToConvert: 'px',  // 需要转换的单位，默认为"px"
            viewportWidth: 1920, //  设计稿的视口宽度
            unitPrecision: 5, // 单位转换后保留的精度
            propList: ['*'], // 能转化为vw的属性列表
            viewportUnit: 'vw', //  希望使用的视口单位
            fontViewportUnit: 'vw', // 字体使用的视口单位
            selectorBlackList: [], // 需要忽略的CSS选择器 
            minPixelValue: 1, // 最小的转换数值，如果为1的话，只有大于1的值会被转换
            mediaQuery: false, // 媒体查询里的单位是否需要转换单位
            replace: true, // 是否直接更换属性值，而不添加备用属性
            exclude: [], // 忽略某些文件夹下的文件或特定文件
            include: undefined,  // 如果设置了include，那将只有匹配到的文件才会被转换，例如只转换 'src/mobile' 下的文件 (include: /\/src\/mobile\//)
            landscape: false, // 是否添加根据 landscapeWidth 生成的媒体查询条件 @media (orientation: landscape)
            landscapeUnit: 'vw' // 横屏时使用的单位
        }
      

  }
}

但是postcss-px-to-viewport做适配，行内样式不能转换为vw，所以使用插件style-vw-loader(github地 https://github.com/hyy1115/style-vw-loader)

style-vw-loader

• 安装依赖

npm install style-vw-loader --save-dev

• 在vue.config.js里进行配置

{
  chainWebpack: (config) => {
      config.module
      .rule('vue')
      .test(/\.vue$/)
      .use('style-vw-loader')
        .loader('style-vw-loader')
    }
}

默认配置是

defaultsProp = {
  unitToConvert: 'px',
  viewportWidth: 750,
  unitPrecision: 5,
  viewportUnit: 'vw',
  fontViewportUnit: 'vw',
  minPixelValue: 1
}

想修改的话，在vue.config.js里进行配置

config.module
    .rule('vue')
    .test(/\.vue$/)
    .use('style-vw-loader')
    .loader('style-vw-loader')
    .options({
        unitToConvert: 'px',
        viewportWidth: 1920,
        unitPrecision: 5,
        viewportUnit: 'vw',
        fontViewportUnit: 'vw', 
        minPixelValue: 1
    })