开发期间如何在VUE-CLI中启用控制台日志 [英] How enable console log in VUE-CLI during development

问题描述

你好，社区.

我一直在努力学习如何用我的方法学习VueJs的过程中如何console.log('whatever')，以便了解我在这里所做的任何行为.

我知道这里已经有一些问题了，我已经深入到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

我尝试用/*eslint no-console: "error"*/注释console.log...之前的上一行，但是效果不佳.

亲爱的先生，一旦与我联系，您是否可以一步一步地指导我，以防我需要弄乱JSON规则，因为我也从未这样做过?

我在网络风暴中使用vue-cli.

提前谢谢！

解决方案

编辑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
}

Hello there community.

I have been trying to figure out how to console.log('whatever') during learning some VueJs development in my methods in order to understand some behaviour of whatever I am doing here.

I understand that there are some questions already asked here and I have scoped into eslint documentation to try an figure this out... I just cannot actually understand what should I do.

This is my methods:

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

This is the error on 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.

So... I have looked into this website: https://eslint.org/docs/rules/no-console

I tried commenting the previous line before console.log... with /*eslint no-console: "error"*/ but it does not work as well.

Dear sir, once reaching out to me on this one, could you please guide me on a step by step in case I need to mess with JSON rules, as I have never done this as well?

I am using vue-cli on webstorm.

Thanks in advance!

解决方案

Edit package.json and in eslintConfig property add

"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

Now, if you want console.log stripped from production build

Edit vue.config.js

and add

// 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
}

这篇关于开发期间如何在VUE-CLI中启用控制台日志的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！