h5 调试跳转

调试h5页面的时候，前端调试的时候点击路由跳转没有反应，这样不方便调试，所以可以在main.js文件中加router.push(url)即可点击跳转到页面。

import Vue from 'vue';
import FastClick from 'fastclick';
import '@/plugins/vant';
import '@/assets/css/base.css'; // 基础样式
import '@/assets/css/common.css'; // 公共样式
import App from './App';
import router from '@/router';
import '@/plugins/directive'; // vue自定义指令
import '@/plugins/mixins';
import store from '@/store';
import { getCookie, getToken } from '@/plugins/utils';
import { gozoomOpenH5Url } from '@p/appNative';
import * as filters from '@/plugins/filters';
import rem from '@/plugins/rem';

Object.keys(filters).forEach(key => {
  Vue.filter(key, filters[key]); //插入过滤器名和对应方法
});

rem();

// 是否有access token
Vue.prototype.$accessToken = getToken();

let ua = navigator.userAgent.toLowerCase();

// 判断手机类型
let isAndroid = /(Android)/i.test(ua);
let isiOS = /(iPhone|iPad|iPod|iOS)/i.test(ua);
Vue.prototype.$iOS = isiOS;
Vue.prototype.$Android = isAndroid;
Vue.prototype.$isMobile = isiOS || isAndroid;

//合同回调地址
let hwOriginOk = `${getCookie('z-app')}://?hwContractOk=1`;
let hwOriginFail = `${getCookie('z-app')}://?hwContractOk=0`;
Vue.prototype.$contractRedirectOkURL = hwOriginOk;
Vue.prototype.$contractRedirectFailURL = hwOriginFail;

// 添加方法
Vue.prototype.$to = (url, webId = 0, displayFlag = 1 | 2 | 8, noNeedWebId = false) => {
  gozoomOpenH5Url(url, displayFlag, webId, noNeedWebId);
  // router.push(url);
};
Vue.prototype.$put = (key, value) => {
  localStorage.setItem(key, value);
};
Vue.prototype.$fetch = key => {
  let result = localStorage.getItem(key);
  localStorage.removeItem(key);
  return result;
};
Vue.prototype.$isNull = value => {
  return [null, undefined].includes(value);
};
Vue.prototype.isProduction = process.env.VUE_APP_ENV === 'production';
Vue.prototype.isDevelopment = process.env.VUE_APP_ENV === 'development';
Vue.prototype.$isAppstore = () => {
  const appstoreMoible = '19923730000';
  const userMobile = store.getters.getUserInfo.userInfo.userMobile;
  return Vue.prototype.isProduction && isiOS && userMobile == appstoreMoible;
};

// // 正式环境使用
// if (Vue.prototype.isProduction) {
// }

// 开发环境使用
if (Vue.prototype.isDevelopment) {
  /* eslint-disable */
  const Vconsole = require('vconsole');
  const vConsole = new Vconsole();
  Vue.use(vConsole);
  /* eslint-enable */
}

// 多次点击聚焦问题
FastClick.prototype.focus = function (targetElement) {
  let length;
  if (targetElement.setSelectionRange && targetElement.type.indexOf('date') !== 0 && targetElement.type !== 'time' && targetElement.type !== 'month') {
    length = targetElement.value.length;
    targetElement.focus();
    targetElement.setSelectionRange(length, length);
  } else {
    targetElement.focus();
  }
};

Vue.config.productionTip = false;

new Vue({
  router,
  store,
  render: h => h(App),
}).$mount('#app');

另外想要在手机上进行h5页面调试可以将vue.config.js文件中将https改为true，即可在手机浏览器上输入你的ip加路由进行手机访问调试。

const path = require('path');
// const BundleAnalyzerPlugin = require('webpack-bundle-analyzer').BundleAnalyzerPlugin;

function resolve(dir) {
  return path.join(__dirname, dir);
}

const outputDir = 'dist/h5';

module.exports = {
  outputDir,
  publicPath: '/',
  assetsDir: 'assets',
  devServer: {
    overlay: {
      warnings: true,
      errors: true
    },
    host: '0.0.0.0',
    port: 9899,
    https: false,
    open: true,
    proxy: 'http://xxxxxxxx' //你的测试地址
    
  },
  configureWebpack: config => {
    if (process.env.VUE_APP_ENV === 'production') {
      config.optimization.minimizer[0].options.terserOptions.compress.warnings = false;
      config.optimization.minimizer[0].options.terserOptions.compress.drop_console = true;
      config.optimization.minimizer[0].options.terserOptions.compress.drop_debugger = true;
      config.optimization.minimizer[0].options.terserOptions.compress.pure_funcs = ['console.log'];
    }
  },
  chainWebpack: config => {
    // 设置别名
    config.resolve.alias.set('@', resolve('src'));
    config.resolve.alias.set('@c', resolve('src/components'));
    config.resolve.alias.set('@a', resolve('src/api'));
    config.resolve.alias.set('@p', resolve('src/plugins'));
    config.resolve.alias.set('@css', resolve('src/assets/css'));
    config.resolve.alias.set('@i', resolve('src/assets/imgs'));
    // 移除预加载
    config.plugins.delete('prefetch');
    config.plugins.delete('preload');

    // config.plugin('webpack-bundle-analyzer')
    //         .use(BundleAnalyzerPlugin)
    //         .init(Plugin => new Plugin());
  },
  pluginOptions: {
    'style-resources-loader': {
      preProcessor: 'less',
      patterns: [path.resolve(__dirname, 'src/assets/css/variables.less')]
    }
  },
  // css相关配置
  css: {
    // 是否使用css分离插件 ExtractTextPlugin
    // extract: true,
    // 开启 CSS source maps?
    sourceMap: false,
    // css预设器配置项
    loaderOptions: {
      less: {
        modifyVars: {
          hack: `true; @import "${path.join(__dirname, './src/assets/css/variables.less')}";`
        }
      },
      sass: {
        prependData: '@import "@css/main.scss";'
      },
    }
    // 启用 CSS modules for all css / pre-processor files.
    // requireModuleExtension: false
  },
  productionSourceMap: false,
  lintOnSave: true
};