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

full-stack-trip

Share
Published by
full-stack-trip
Tags: nuxt.js

Recent Posts

Android 自定义 View 入门

说来惭愧,工作数年,连基本的自…

4 年 ago

retrofit 同时支持 xml 和 json

retrofit 解析 jso…

4 年 ago

mysql - 存储过程 从入门到放弃

最近有个报表的需求,于是乎用了…

4 年 ago

奶嘴战略 - 你不得不知道的扎心真相(一)

一句:英雄枯骨无人问,戏子家事…

4 年 ago

acme.sh 的简单使用

acme.sh 是纯 shel…

4 年 ago

wrk -更现代化的http压测工具

wrk 是一款更现代化的 ht…

4 年 ago