为什么我不能在我的 Vue 应用程序上使用调试器或 console.log答案

【问题标题】：Why I can't use debugger or console.log on my Vue app为什么我不能在我的 Vue 应用程序上使用调试器或 console.log
【发布时间】：2020-02-25 02:59:01
【问题描述】：

我刚刚通过 Vue CLI 创建了一个新的 Vue 应用程序，但 我不能使用调试器或 console.log 否则我会在浏览器中收到错误，为什么以及如何允许它 ？

Unexpected 'debugger' statement (no-debugger) at src/components/SomeComponent.vue:48:7

【问题讨论】：

如果你添加了你得到的错误，当你得到那个错误时，它会很有帮助......这是一个 linting 错误吗？是 Webpack 错误吗？我知道您已经回答了自己的问题，但提供其他上下文仍然会有所帮助。
使用我遇到的错误进行编辑，是的，这是一个 linting 错误。

标签： vue.js vuejs2 eslint vue-cli vue-cli-3

【解决方案1】：

在我的情况下，这是因为我在创建项目时使用了默认配置，它包括 eslint：

因此，为了允许调试器和 console.log 语句，我修改了 package.json 文件中的规则，如下所示：

  "eslintConfig": {
    "root": true,
    "env": {
      "node": true
    },
    "extends": [
      "plugin:vue/essential",
      "eslint:recommended"
    ],
    "rules": {
        "no-console": 1,
        "no-debugger": 1
    },
    "parserOptions": {
      "parser": "babel-eslint"
    }
  }

这样我在编译时仍然会收到警告，所以我不会忘记在提交之前删除它们，但我可以运行我的应用程序并使用这些语句。

【讨论】：

通常 es list 设置为警告不会停止这些错误，因此您的应用程序应该仍然运行...另外，根据我的经验，您可以通过更具体地说明您的呼叫方式来解决大多数问题控制台例如window.console.log() vs console.log()
嗯，很奇怪，eslint 配置是默认配置。

【解决方案2】：

你可以使用：

//eslint-disable-next-line no-console

只有当你真的必须使用console.log()

否则我强烈建议使用像'vuejs-logger'这样的记录器。

发生的情况就像在生产环境中，您仍然有这些我实际上不太喜欢的 console.log 行...加上重建期间的警告会阻止您在开发期间使用应用程序的热重载。

【讨论】：

我明白了，是的，但是这些 console.log 语句仅用于调试/开发。这些将在提交代码之前被删除。
我所做的是在 git commit / push 之前使用 husky 运行 linter。