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 组件按需引入需配置：
在
文件中配置