Vue项目集成前端异常监控工具Sentry（一）-前端集成

项目是使用vue cli2.0版本搭建的，目录结构与3.0cli搭出来的不一样。仅学习使用可以使用vue cli官方提供的方法将版本降级。

npm install -g @vue/cli-init
vue init webpack my-project

一、集成Sentry

1.登录官网https://sentry.io/，注册账号，建立组织（organization）和项目（project）

2.安装sentry sdk

npm install @sentry/browser
npm install @sentry/integrations

3.在main.js中初始化监控服务,下面代码是官方直接提供的。

import Vue from 'vue'
import * as Sentry from '@sentry/browser'
import * as Integrations from '@sentry/integrations'

Sentry.init({
	dsn: 'https://d8b8b63d1d92443294261269bfa849a1@sentry.io/1501448',
	integrations: [new Integrations.Vue({Vue, attachProps: true})],
});

// dsn是官方提供的，每个项目的dsn都不相同，这里换成自己项目的

因为监控服务是通过Vue.config.