node js

nuxt.config.js 本地开发禁用插件 - disable plugin for local development

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 的玩了。