关于javascript:vuecli-配置移动端适配方案

前言： 最近要新启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我的项目实现挪动端适配笔记