vue移动端项目的适配

在你开发vue后，你需要打包项目到线上或者通过HbuilderX打包成apk，这个时候你需要考虑适配，下面给大家讲讲如何适配！

一、安装需要的包

npm i lib-flexble --save
npm i px2rem-loader

二、将安装包引入到main.js中

import 'lib-flexible/flexible'

三、进入public/index.html中

更换meta标签

<meta name="viewport" content="width=device-width, initial-scale=1.0">

四、在vue.config.js文件中添加

// vue.config.js
module.exports = {
  chainWebpack: config => {
    config.module
      .rule('css')
        .test(/\.css$/)
        .oneOf('vue')
        .resourceQuery(/\?vue/)
        .use('px2rem')
          .loader('px2rem-loader')
          .options({
            remUnit: 75
          })
  }
}

注意：更改配置文件，需要重启

五、打包发布，使用HbuilderX打包