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

subsistent

于 2023-09-27 23:26:12 发布

阅读量613

点赞数 2

CC 4.0 BY-SA版权

分类专栏： Vue 文章标签： vue.js postcss 前端

本文链接：https://blog.csdn.net/m0_65121454/article/details/133365368

Vue 专栏收录该内容

40 篇文章

订阅专栏

本文介绍了如何在Vue项目中通过npm安装并配置autoprefixer处理浏览器前缀，以及使用postcss-px-to-viewport进行像素单位转换，重点讲解了在vue.config.js中的配置，包括exclude和include选项的用法。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

下载 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配置项