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

40次阅读

共计 1081 个字符，预计需要花费 3 分钟才能阅读完成。

前言：最近要新启 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)

}