vuecli4中配置px自动转换vw

最新推荐文章于 2025-06-25 11:10:46 发布

原创

最新推荐文章于 2025-06-25 11:10:46 发布 · 601 阅读

2 ·

CC 4.0 BY-SA版权

文章标签：

#vue.js #前端

本文介绍了如何在VueCLI4项目中通过配置插件，自动将px单位转换为vw，以简化移动端响应式布局的开发。详细步骤包括安装插件，创建配置文件并添加转换配置。

元气满满，直接干~~~

移动端使用vw实现响应式布局时，需要自己计算vm的数值，非常难用！

什么是vw：默认将屏幕宽度分为100份，1vw = 一份。

在vuecli4中使用一个插件，让我们在开发时照常写px，而插件可以将px自动转换vw。非常好用！

1. 下载 `npm i postcss-px-to-viewport -D`

2. 在项目根目录下创建 `.postcssrc.js` 作为配置文件

3. 添加以下配置：

const path = require('path');

module.exports = ({ file }) => {
  const designWidth = file.dirname.includes(path.join('node_modules', 'vant')) ? 375 : 750;

  return {
    plugins: {
      autoprefixer: {},
      "postcss-px-to-viewport": {
      unitToConvert: "px", // 要转化的单位
      viewportWidth: designWidth, // UI设计稿的宽度  750/640
      unitPrecision: 6, // 转换后的精度，即小数点位数
      propList: ["*"], // 指定转换的css属性的单位，*代表全部css属性的单位都进行转换
      viewportUnit: "vw", // 指定需要转换成的视窗单位，默认vw
      fontViewportUnit: "vw", // 指定字体需要转换成的视窗单位，默认vw
      selectorBlackList: ["wrap"], // 指定不转换为视窗单位的类名，
      minPixelValue: 1, // 默认值1，小于或等于1px则不进行转换
      mediaQuery: true, // 是否在