开发中如何在VUE-CLI中启用控制台登录

Question

我一直在尝试弄清楚如何 console.log('whatever') 在我的方法中学习一些 VueJs 开发的过程中，以便理解我在这里所做的任何行为的一些行为。

我知道这里已经提出了一些问题，并已将范围纳入 ESLINT 文档以尝试解决这个问题......我只是无法真正理解我的意思应该做。

我的代码：

methods: {
    submitData() {
        this.$http.post('https://vue-testing-8a2de.firebaseio.com/data.json', this.user)
                  .then(response => {
                            console.log(response);
                        }, error => {
                            console.log(error)
                        })
    }
}

这是 ESLINT 上的错误：

Failed to compile.

./src/App.vue
Module Error (from ./node_modules/eslint-loader/index.js):
error: Unexpected console statement (no-console) at src/App.vue:35:22:
  33 | this.$http.post('https://vue-testing-8a2de.firebaseio.com/data.json',this.user)
  34 |           .then(response => {
> 35 |                      console.log(response);
     |                      ^
  36 |                  }, error => {
  37 |                      console.log(error)
  38 |                  })


error: Unexpected console statement (no-console) at src/App.vue:37:22:
  35 |                      console.log(response);
  36 |                  }, error => {
> 37 |                      console.log(error)
     |                      ^
  38 |                  })
  39 |             }
  40 |         }


2 errors found.

我查看过这个网站：

https://eslint.org/docs/rules/no-console

我尝试在 console.log 之前评论上一行：

/*eslint no-console: "error"*/（但效果不佳）

如果我需要弄乱 JSON 规则，我需要一步一步的指导，因为我以前从未这样做过。

我在 WebStorm 上使用 vue-cli。

提前致谢！

Answer 1

编辑 package.json 并在 eslintConfig 属性中添加

"eslintConfig": { // don't add this, it's already there
    // there's stuff here
    "rules": { // find the rules property
    // addition starts here
        "no-console": "off"
    // addition ends here
    },
    // and keep what was already here

现在，如果您希望 console.log 从生产版本中删除

编辑vue.config.js

并添加

// addition starts here
const TerserPlugin = require('terser-webpack-plugin')
const isProd = process.env.NODE_ENV === 'production'
// addition ends here

module.exports = {
    // addition starts here
    configureWebpack: {
        optimization: {
            minimize: true,
            minimizer: isProd ? [
                new TerserPlugin({
                    terserOptions: {
                        ecma: 6,
                        compress: { drop_console: true },
                        output: { comments: false, beautify: false }
                    }
                })
            ] : []
        }
    },
    // addition ends here
    // and keep what was already here
}

Answer 2

1 编辑 package.json

2然后找到"rules"：{}

3 更改为 "rules"：{"no-console":0}

4 如果您打开 Vue 服务器，请关闭它并再次运行。那么问题就搞定了

Answer 3

只需使用console.table(值)或console.info(值) 而不是 console.log(值)

开发中如何在VUE-CLI中启用控制台登录

How enable console log in VUE-CLI during development

javascript

post

eslint

vuejs2

vue-cli-3