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

THIS

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


第一步

初始化项目


npm install -g @vue/cli

vue create M-h5
第二步

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

image.png

第三步

启动项目

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"

image.png

资料:

阅读 2.8k

多读书、多看报、少吃零食、多睡觉

716 声望
9 粉丝
0 条评论
你知道吗?

多读书、多看报、少吃零食、多睡觉

716 声望
9 粉丝
文章目录
宣传栏