nuxt.config.js 文件是 nuxt.js 的配置文件,比如插件、js等都在这个文件里配置,而bug跟踪是永久不变的话题,但是我们不希望dev环境产生的崩溃也记录到系统里,于是用了此文。本文主要讲述如何使用 sentry.io 记录崩溃并只在正式环境启用它。 至于 nuxt.js 的优势我这里不提,但如果你是一名 vue 开发者,可以参考  vue.js 转 nuxt.js 攻略,下面,我们不如主题,先为你的 nuxt.js 应用添加 sentry.io 支持,随时随地记录崩溃。

添加 sentry-module 到 nuxt.js 应用里

1、编辑 nuxt.config.js 在 modules 里添加 sentry 如下:
modules: [
  "@nuxtjs/axios",
  "@nuxtjs/sentry"
]
2、添加 sentry 配置信息,接着在 nuxt.config.js 里添加相关配置,最终如下:
modules: [
  "@nuxtjs/axios",
  "@nuxtjs/sentry"
]

sentry: {
  public_key: '',
  private_key: '',
  project_id: '',
  dsn: 'https://xxxxx@sentry.io/xxxx',
  config: {
    release: '1.0'
  },
},
这里的 dsn 你可以在 sentry.io 网站里找到。

本地开发环境里禁用 sentry 插件

首先,要做到在本地开发环境里禁用某些组件,最简单的办法我相信聪明的你早就想到了,用分支嘛,这么简单的事难不倒我的啦。但是 dev 分支和 master 分支差距比较大并不是好事,谁能保证一直在 dev 分支开发,说不定啥时候脑子一抽在master分支做了修改而由于master和dev分支差别比较大,比如配置文件不一样等等,最终导致你无法 checkout 到 dev 分支,这也不是好事啊。 其实,nuxt.js 支持根据环境配置的。请看: 1、创建 config 文件夹,在下面创建 dev.json 和 default.json 两个文件,分别如下: dev.json:
{
  "modules": [
    "@nuxtjs/axios"
  ]
}
而 default.json 如下:
{
  "modules": [
    "@nuxtjs/axios",
    "@nuxtjs/sentry"
  ]
}
2、在 nuxt.config.js 里添加:
const config = require('config');
然后找到 nuxt.config.js 里的:
modules: [
  "@nuxtjs/axios",
  "@nuxtjs/sentry"
]
修改为:
modules: config.get('modules'),
3、找到 package.json 里的:
"scripts": {
  "dev": "nuxt",
  "build": "nuxt build",
  "start": "nuxt start --spa",
  "generate": "nuxt generate",
  "lint": "eslint --ext .js,.vue --ignore-path .gitignore .",
  "precommit": "npm run lint"
},
修改为:
"scripts": {
  "dev": "cross-env NODE_ENV=dev nuxt",
  "build": "nuxt build",
  "start": "nuxt start --spa",
  "generate": "nuxt generate",
  "lint": "eslint --ext .js,.vue --ignore-path .gitignore .",
  "precommit": "npm run lint"
},
最后:npm install cross-env --save-dev 完美,你现在执行 npm run dev 的时候 sentry-module 不会加载,可以愉快的,没 bug 的玩了。