如何屏蔽Vue开发中过多的console输出

在 Vue 开发中，我们会经常使用 console.log 来调试代码。但是，在生产环境下，这些 console.log 输出会影响页面性能，甚至会造成安全风险。因此，我们需要将这些 console.log 输出屏蔽掉。

方法一：设置 Vue.config.productionTip 为 false

您可以在打包构建时，将 Vue.config.productionTip 设置为 false，来关闭控制台中的提示信息。例如：

// main.js
Vue.config.productionTip = false;

方法二：使用 eslint-plugin-vue 插件

此外，您还可以使用 eslint-plugin-vue 插件来规范代码中的 console 使用。该插件提供了一个 no-console 规则，可以帮助您检查代码中的 console 使用情况，并给出警告或错误提示。例如，您可以在 .eslintrc.js 中添加以下配置：

module.exports = {
  // ...
  plugins: [
    'vue',
  ],
  rules: {
    // ...
    'no-console': process.env.NODE_ENV === 'production' ? 'error' : 'warn',
  },
};

这样，在生产环境下，使用 console 会被认为是错误，而在开发环境下，使用 console 会被认为是警告。