vue移动端项目自适应解决方案

做移动端项目的时候，页面自适应是永远无法回避的话题。为了实现页面的自适应，现在比较流行的做法是使用rem做单位。今天在给一个vue-cli3脚手架生成的移动端项目做自适应，借助的是淘宝开源的amfe-flexible。

安装amfe-flexible

npm i amfe-flexible -S

配置amfe-flexible

配置也是比较简单的，在main.js将配置amfe-flexible import进项目就好了

    //.main.js
    import Vue from 'vue'
    import App from './App.vue'
    import router from './router'
    import 'amfe-flexible'
    
    Vue.config.productionTip = false
    
    new Vue({
      router,
      store,
      render: h => h(App)
    }).$mount('#app')
    

假如想使用sass等预处理器并且scss代码文件中单位使用px,则可以借助postcss-px2rem插件实现

安装postcss-px2rem：

npm i postcss-px2rem -S

配置postcss-px2rem：

    //.postcssrc.js
    
    module.exports = {
      plugins: {
        autoprefixer: {},
        'postcss-px2rem': {
          remUnit: 37.5 
        }
      }
    }
    

配置就是在项目根目录创建一个.postcssrc.js配置文件，并写入上面一段代码，重启项目即可看到效果。