vue-cli3在main.js中console.log()会报错的解决

在VueCLI3中，为了更加方便地创建和管理项目，工具链对Webpack进行了封装，因此我们无法直接在main.js中使用“console.log()”等JS原生方法。在这种情况下，我们可以使用VueCLI提供的“vue.config.js”文件来解决该问题。

下面是解决方案的详细步骤：

1. 在项目根目录下创建“vue.config.js”文件。如果已经存在该文件，则直接打开该文件，不用继续进行此步骤。

2. 在“vue.config.js”文件中添加以下代码来关闭ESLint的no-console规则：

// vue.config.js
module.exports = {
  lintOnSave: false
}

1. 在“main.js”中使用“console.log()”等JS原生方法即可。

以下是两个示例，演示了如何在VueCLI3中使用“console.log()”方法：

示例1：

// main.js
import Vue from 'vue'
import App from './App.vue'

Vue.config.productionTip = false

console.log('hello console.log!')

new Vue({
  render: h => h(App),
}).$mount('#app')

示例2：

// App.vue
<template>
  <div>
    <button @click="handleClick">Click me</button>
  </div>
</template>

<script>
export default {
  name: 'App',
  methods: {
    handleClick() {
      console.log('button clicked!')
    }
  }
}
</script>

在上面的示例中，我们可以在“main.js”和“App.vue”文件中使用“console.log()”方法，而不会因为ESLint的no-console规则而报错。

如果你是想在VueCLI3的其他文件中使用原生JS方法，则也可以按照上述步骤进行配置。

希望以上解决方案对你有所帮助！