前言： 最近要新启H5我的项目、找到了之前的适配计划 postCss 外面的坑曾经踩完、间接跟着步骤装置即可。

第一步

初始化我的项目

npm install -g @vue/clivue create M-h5
第二步

依据本人的需要抉择我抉择的默认

第三步

启动我的项目

cd m-h6yarn serve
第四步

装置相干的依赖

yarn add cssnano cssnano-preset-advanced postcss-aspect-ratio-mini  postcss-cssnext postcss-px-to-viewport postcss-px-to-viewport-opt  postcss-viewport-units postcss-write-svg
第五步

配置postCss文件我的项目的根目录文件夹 postcss.config.js 跟package.json同级

module.exports = {    "plugins": {        // "postcss-import": {},        // "postcss-url": {},        // to edit target browsers: use "browserslist" field in package.json        "postcss-write-svg": {            uft8: false        },        "postcss-cssnext": {},        "postcss-px-to-viewport": {            viewportWidth: 750, // 设计稿宽度            viewportHeight: 1334, // 设计稿高度，能够不指定            unitPrecision: 3, // px to vw无奈整除时，保留几位小数            viewportUnit: 'vw', // 转换成vw单位            selectorBlackList: ['.ignore', '.hairlines'], // 不转换的类名            minPixelValue: 1, // 小于1px不转换            mediaQuery: false, // 容许媒体查问中转换            exclude: /(/|)(node_modules)(/|)/ //不转换咱们引入的第三方包        },        "postcss-viewport-units": {},        "cssnano": {            preset: "advanced",            autoprefixer: false, // 和cssnext同样具备autoprefixer，保留一个            "postcss-zindex": false            }        }![image.png](/img/bVbOW2M)}
第六步

删除package.json的browserslist的 "not dead"

材料：

  • Vue 挪动端中应用vw适配踩坑
  • Vue我的项目实现挪动端适配笔记