vue-cli 配置移动端适配方案

前言： 最近要新启H5项目、找到了之前的适配方案 postCss 里面的坑已经踩完、直接跟着步骤安装即可。

---

第一步

初始化项目

npm install -g @vue/cli

vue create M-h5

第二步

根据自己的需求选择我选择的默认

第三步

启动项目

cd m-h6
yarn 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项目实现移动端适配笔记