vue 在web项目中写H5页面并适配移动端（记一次笔记）

最新推荐文章于 2026-01-09 08:57:20 发布

原创最新推荐文章于 2026-01-09 08:57:20 发布 · 3.5k 阅读 ·

本内容遵循CC 4.0 BY-SA版权协议

代码可运行

文章介绍了在Vue项目中如何进行H5页面的移动端适配，特别是利用postcss-px-to-viewport-update插件来指定文件夹转换，并提到了Vant组件按需引入的配置方法。

vue 在web项目中写H5页面并适配移动端（记一次笔记）

1、安装移动端适配插件
在这里插入图片描述
注意：这里postcss-px-to-viewport这个插件不能指定文件适配移动端，找到别人补充的postcss-px-to-viewport-update，这个就能指定文件夹。
2、在package.json同级创建一个js文件：

文件内容：
const path = require(‘path’);

module.exports = ({
webpack
}) => {
console.log(‘webpack.resourcePath==’,webpack.resourcePath)
const designWidth = webpack.resourcePath.includes(path.join(‘node_modules’, ‘vant’,‘views/mobile’)) ? 375 : 750;

return {
plugins: {
“postcss-write-svg”: {
uft8: false
},
“postcss-cssnext”: {},

  "postcss-px-to-viewport-update": {
    unitToConvert: "px",
    viewportWidth: designWidth,
    viewportHeight: 1447, // 设计稿高度，可以不指定
    unitPrecision: 3,
    viewportUnit: "vw",
    fontViewportUnit: "vw",
    selectorBlackList: ['.ignore', '.hairlines'],
    include: [/mobile/],  // 如果设置了include，那将只有匹配到的文件才会被转换，例如只转换 'src/mobile' 下的文件 (include: /\/src\/mobile\//)
    minPixelValue: 1,
    mediaQuery: false,
    exclude: /(\/|\\)(node_modules)(\/|\\)/ //不转换我们引入的第三方包
  }
},
"postcss-viewport-units": {},
"cssnano": {
  "cssnano-preset-advanced": {
    zindex: false, // 忽略对z-index样式的改动
    autoprefixer: false // 和cssnext同样具有autoprefixer，保留一个
  },
}

}

}
在这里插入图片描述
这个是关键：配置这里就能指定到文件夹，这是在views文件夹下面的mobile文件夹，所有移动端的都包含在这里了，如图：

vant 组件按需引入需配置：
在
文件中配置