开发过程中如何在 VUE-CLI 中启用控制台登录 [英] How enable console log in VUE-CLI during development

问题描述

在我的方法中学习一些 VueJs 开发期间，我一直试图弄清楚如何 console.log('whatever') 以了解我在这里所做的任何行为的一些行为.>

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

我的代码:

方法:{提交数据(){this.$http.post('https://vue-testing-8a2de.firebaseio.com/data.json', this.user).then(响应 => {控制台日志(响应)；}, 错误 =>{控制台日志(错误)})}}

这是 ESLINT 上的错误:

编译失败../src/App.vue模块错误(来自 ./node_modules/eslint-loader/index.js):错误:在 src/App.vue:35:22 出现意外的控制台语句(无控制台):33 |this.$http.post('https://vue-testing-8a2de.firebaseio.com/data.json',this.user)34 |.then(响应 => {>35 |控制台日志(响应)；|^36 |}, 错误 =>{37 |控制台日志(错误)38 |})错误:在 src/App.vue:37:22 出现意外的控制台语句(无控制台):35 |控制台日志(响应)；36 |}, 错误 =>{>37 |控制台日志(错误)|^38 |})39 |}40 |}发现 2 个错误.

我查看了这个网站:

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

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

• /*eslint no-console: "error"*/(但效果不佳)

如果我需要弄乱 JSON 规则，我需要一个分步指南，因为我以前从未这样做过.

我在 WebStorm 上使用 vue-cli.

提前致谢！

解决方案

Edit package.json 并在 eslintConfig 属性中添加

"eslintConfig": {//不要添加这个，它已经存在了//这里有东西"rules": {//找到规则属性//加法从这里开始无控制台":关闭"//加法到此结束},//并保留已经存在的内容

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

编辑vue.config.js

并添加

//加法从这里开始const TerserPlugin = require('terser-webpack-plugin')const isProd = process.env.NODE_ENV === '生产'//加法到此结束模块.出口 = {//加法从这里开始配置Webpack:{优化: {最小化:真，最小化: isProd ?[新的 TerserPlugin({terser选项:{ecma: 6,压缩:{ drop_console:真}，输出:{ 评论:假，美化:假}}})] : []}},//加法到此结束//并保留已经存在的内容}

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're some questions already asked here and have scoped into ESLINT documentation to try an figure this out... I just can't actually understand what I should do.

My code:

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.

I have looked into this website:

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

I tried commenting the previous line before console.log:

• /*eslint no-console: "error"*/ (but it doesn't works well)

I need a step by step guide if I need to mess with JSON rules, as I have never done this before.

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屋！