vue3.0 通过`vw`替换`px`的方式来解决适配问题

最新推荐文章于 2024-03-22 09:54:10 发布

只会吃菜的鸟

最新推荐文章于 2024-03-22 09:54:10 发布

阅读量783

点赞数

分类专栏：原生js 文章标签： javascript vue.js html5

本文链接：https://blog.csdn.net/weixin_39638234/article/details/106522866

版权

方案： postcss-px-to-viewport

安装： npm install postcss-px-to-viewport --save-dev
使用：因为插件的配置选项中有个exclude选项，它的值只支持正则表达式，但是正则表达式再json中是不允许的，所以不要配置在package.json中，要配置在vue.config.js里

  devServer: {
    port: 8080,
    disableHostCheck: true,
  },
  css: {
    loaderOptions: {
      postcss: {
        plugins: [
          require("postcss-px-to-viewport")({
            unitToConvert: "px",
            viewportWidth: 750,
            unitPrecision: 3,
            propList: [
              "*"
            ],
            viewportUnit: "vw",
            fontViewportUnit: "vw",
            selectorBlackList: [],
            minPixelValue: 1,
            mediaQuery: false,
            replace: true,
            exclude: /(\/|\\)(node_modules)(\/|\\)/,
          })
        ]
      }
    }
  }
}