VUE移动端项目的适配

随着手机的普及和前端的不断发展,移动端的项目已经渐渐的成为了日常开发中的主流项目,由于各厂商的标准不统一性也给前端带来了极大的困扰,主要就是体现在各系统各版本和各浏览器的兼容性方面,而移动端项目的适配就成了不可避免的话题.最近也是刚刚接了几个移动端的私活项目也是在此跟大家分享一下我的一些配置.仅代表本人观点

移动端适配的方式还是很多的有的是通过ide的一些插件在输入的时候直接进行换算有一些就是通过scss/less等进行适配但是插件这种方式的并不太利于团队开发所以我们就可以通过手淘的flexible配合一个webpack的px2rem的插件,将其配置在webpack的工作流中这样就可以在项目中直接按照像素开发打包后就会直接变成对应的rem
这里我们去下载一下淘宝的flexible和postcss-px2rem
然后将flexible引入到main.js flexible会根据设备的DPR(不知道的同学可以自行查一下很重要的一个概念)动态的添加meta
然后修改vue脚手架下build目录下的util.js

javascript

const postcssLoader = {
    loader: 'postcss-loader',
    options: {
      sourceMap: options.sourceMap,
      plugins: function () {
        return [
          require('postcss-px2rem')({remUnit: 37.5}) // 这里是按照你的设计稿来配置即可 一般是宽度/10
        ]
      }
    }
  }

然后修改vue-loader.js

javascript

postcss: [
    postcssLoader
  ]

这时候我们就配置好了直接在项目中使用实际像素开发即可 px2rem会自动的帮我们转换成对应的rem单位