vue项目之移动端vw布局-配置postcss.config.js

最新推荐文章于 2025-05-21 09:47:11 发布

牛先森家的牛奶

最新推荐文章于 2025-05-21 09:47:11 发布

阅读量2.1k

点赞数

CC 4.0 BY-SA版权

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

本文链接：https://blog.youkuaiyun.com/weixin_42681295/article/details/123951567

Vue 专栏收录该内容

122 篇文章

订阅专栏

本文介绍了如何在Vue项目中配置移动端vw布局，通过postcss.config.js文件设置postcss-import、autoprefixer及postcss-px-to-viewport插件，实现响应式设计。详细讲解了各配置项的作用，如viewportWidth、viewportHeight、unitPrecision等，并提供了package.json配置示例。同时强调了版本匹配的重要性，避免引入不同版本包导致的问题。

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

vue项目之移动端vw布局-配置postcss.config.js

- vue项目之移动端vw布局-配置postcss.config.js
- - postcss.config.js文件
  - package.json文件

vue项目之移动端vw布局-配置postcss.config.js

postcss.config.js文件

// https://github.com/michael-ciniawsky/postcss-load-config

module.exports = {
  "plugins": {
    "postcss-import": {},
    // to edit target browsers: use "browserslist" field in package.json
    "autoprefixer": {
      path: ['./src/*']
    },
    "postcss-px-to-viewport-opt": {
      "viewportWidth": "750", // 视窗的宽度，对应设计稿的宽度
      "viewportHeight": "667", // 视窗的高度
      "unitPrecision": 5, // 指定px转换为视窗单位值的小数位数(因为无法整除)
      "viewportUnit": "vw", // 指定需要转换成的视窗单位，使用vw
      "selectorBlackList": ['#nprogress'], // 指定不转换为视窗单位的类
      "minPixelValue": 1, // 小于或等于1px不转换为视窗单位
      "mediaQuery": false, // 允许在媒体查询中转换px
      "exclude": /(\/|\\)(node_modules)(\/|\\)/ // 不包含node_modules文件
    },
  }
}

package.json文件

{
  "name": "mobile_vw_pro",
  "version": "0.1.0",
  "private": true,
  "scripts": {
    "dev": "vue-cli-service serve",
    "build": "vue-cli-service build",
    "lint": "vue-cli-service lint"
  },
  "dependencies": {
    "core-js": "^3.6.5",
    "postcss-px-to-viewport-opt": "0.0.4",
    "vue": "^2.6.11",
    "vue-router": "^3.2.0",
    "vuex": "^3.4.0"
  },
  "devDependencies": {
    "@vue/cli-plugin-babel": "~4.5.7",
    "@vue/cli-plugin-eslint": "~4.5.7",
    "@vue/cli-plugin-router": "~4.5.7",
    "@vue/cli-plugin-vuex": "~4.5.7",
    "@vue/cli-service": "~4.5.7",
    "@vue/eslint-config-prettier": "^6.0.0",
    "babel-eslint": "^10.1.0",
    "eslint": "^6.7.2",
    "eslint-plugin-prettier": "^3.3.1",
    "eslint-plugin-vue": "^6.2.2",
    "less": "^3.0.4",
    "less-loader": "^7.0.1",
    "postcss": "^8.4.12",
    "postcss-import": "^11.0.0",
    "postcss-loader": "^4.0.4",
    "postcss-px-to-viewport": "0.0.3",
    "prettier": "^2.2.1",
    "vue-template-compiler": "^2.6.11"
  },
  "eslintConfig": {
    "root": true,
    "env": {
      "node": true
    },
    "extends": [
      "plugin:vue/essential",
      "eslint:recommended",
      "@vue/prettier"
    ],
    "parserOptions": {
      "parser": "babel-eslint"
    },
    "rules": {}
  },
  "browserslist": [
    "> 1%",
    "last 2 versions",
    "not dead"
  ]
}