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