vp-tools

vp-tools

结合公司现有项目，对一些常用功能进行封装。

功能目录

• VpAxios,基于 very-axios 进行的修改和封装，适配成适合公司项目的请求库。
• originalAxios,原始的 axios，以便特殊时刻使用。
• storePlugin,vuex 中用于双向同步 sessionStorage 和 vuex 中的数据，便于管理维护。
• $session,暴露出的$session 方法
• vpGlobal,以后全局使用的插件，目前仅设置了$session
• vpCode,以后插码用的指令。
• $getEncryptQueryString, 获取链接上的 EQS 加密参数，并存到缓存里，调用该方法可以直接获取到解密后的 EQS 参数。
• $setRemarks, 设置水印
• vpErrorLog 错误日志上报系统

功能介绍

VpAxios

见 VpAxios 使用说明文档

originalAxios

导出原始的 axios，以便特殊时刻使用。

storePlugin

vuex 中用于双向同步 sessionStorage 和 vuex 中的数据，便于统一管理维护，使用方法：

// store.js
import Vue from 'vue'
import Vuex from 'vuex'
import { storePlugin } from 'vp-tools'

export default new Vuex.Store({
  modules: {},
  getters: {},
  plugins: [storePlugin],
  strict: process.env.NODE_ENV === 'development'
})

$session

暴露出的 $session方法，直接将以前写的$session 方法更换成这个即可。

当前在以下环境会对本地缓存进行加密。

• 'stageh5.sd.chinamobile.com',
• 'sn.ac.10086.cn', // 正式环境的请不要取消。其他3个环境可以随便取消。
• 'weidian.hb.vpclub.cn', // 正式环境的请不要取消。其他3个环境可以随便取消。
• 'h5.sd.chinamobile.com' // 正式环境的请不要取消。其他3个环境可以随便取消。

// globalPlugin.js
import { $session } from 'vp-tools'
function install (Vue, options) {
  Vue.prototype.$session = $session
}
export default install

vpGlobal

以后全局使用的插件，目前仅设置了$session 挂在到 vue 实例上。

vpCode

以后插码用的指令。

$getEncryptQueryString

例如访问的链接为：

http://127.0.0.1:5500/test.html?EQS=xH8pY5ApaUMxzFt2XvBs9E3qSLfv9xfQWA3UXjkbb5+9b22LJyB5rr7XuZ1Xwp5tJ3xV8epiQFNYJw5Iu7oKCHOHOCyvo/yQ

会自动的存储 EQS 字段到 session 中，调用$getEncryptQueryString 方法，可以直接获取到解密后的 EQS 数据。 以后需要使用链接上的参数，均采用此种方式进行交互。

vpErrorLog 错误日志上报系统

用法：

Vue.use(vpErrorLog);

安装后，会注册以下 3 个事件:

• window.onerror = () =>{}
• window.addEventListener('unhandledrejection',() =>{})
• Vue.config.errorHandler=()=>{}

并收集错误信息，通过 Image 接口将错误信息上传到后台系统。 使用 ELK 错误日志系统可查询。

报错统计信息：

errorType, 'onerror', 'unhandledrejection', 'vueErrorHandler'三种类型。
'onerror': 表示此为非 vue 文件的 js 报错。
'unhandledrejection': 表示此一般为未捕获的 promise 类型报错。
'vueErrorHandler': 表示此为 vue 文件内的报错。

currentUrl, 当前报错的 url 页面地址
operationId, 当前登录信息中的工号 employeeNumber
handleMobile, 当前的 mixTel，山东 mixTel 逻辑，取自链接上手机号，有一定环境限制
errorContext, 抛出的报错信息
systemUA, 浏览器 ua 信息
ip, 报错用户的 ip
platform 报错程序平台类型。所有的 H5 页面中，这里写死是'H5'，便于后台区分 app 报错