调试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
};