vue开发h5项目

与原生APP交互

通过代理（userAgent）来判断是否在APP内部，以及是Android还是IOS

import Vue from 'vue'
Vue.use({
    install(vue, options){
        const userAgent = window.navigator.userAgent;
        // 这里的 appInfo 需要向Android/IOS 开发人员确认，是一个字符串
        vue.prototype.$isApp = /appInfo/.test(userAgent);
        vue.prototype.$isAndroid = userAgent.indexOf('Andriod') > -1 || userAgent.indexOf('Adr') > -1;
        
        // 处理h5页面与原生的交互
        vue.prototype.dylan_invokeToMobile = function(method, params){
            if(vue.prototype.$isAndroid){
                window.android[method](JSON.stringify(params));
            }else{
                window.webkit.messageHandlers[method].postMessage(params)
            }
        }
    }
})

移动端rem适配

  移动端rem适配

• 插件1（rem适配）：lib-flexible
• 插件2（rem转px）：postcss-px2rem

修改vue.config.js文件

const path = require('path');
const resolve = dir => path.join(__dirname, dir);

module.exports = {
  publicPath: process.env.VUE_APP_BASEURL,
  chainWebpack: config => {
    config.resolve.alias
      .set('@request', resolve('src/common/request'));
  },
  //是否为 Babel 或 TypeScript 使用 thread-loader。该选项在系统的 CPU 有多于一个内核时自动启用，仅作用于生产构建。
  // parallel: require('os').cpus().length > 1,
  css: {
    loaderOptions: {
      postcss: {
        plugins: [require('postcss-px2rem')({
          remUnit: 75 // 设计图的宽度/10，我这里设计图是750的宽度，所以就750/10=75
        })]
      }
    }
  },
  productionSourceMap: false
  // productionGzip: true,
};

修改 main.js 文件

import 'lib-flexible/flexible.js';