개발 중에 VUE-CLI에서 콘솔 로그 사용 방법

개발 중에 VUE-CLI에서 콘솔 로그 사용 방법

어떻게 해야 할지 계속 고민하고 있어요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 규칙을 어기려면 스텝 바이 스텝 가이드가 필요합니다.처음부터입니다.

사용하고 있다vue-cli웹스톰에 접속합니다.

잘 부탁드립니다!

편집package.jsoneslintConfig 속성 추가

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

1 패키지를 편집합니다.json

2 '규칙'을 찾습니다.{ }

3 이 '규칙'을 변경합니다.{"비활성화":0}

4 Vue 서버를 켜면 끄고 다시 실행합니다.그러면 문제가 해결됩니다.

console.log(value) 대신 console.table(value) 또는 console.info(value)만 사용합니다.

언급URL : https://stackoverflow.com/questions/59366773/how-enable-console-log-in-vue-cli-during-development