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