Vue报错: ‘Unexpected console statement (no-console)‘ 的解决办法

最新推荐文章于 2024-03-19 10:43:47 发布

码路小匠

最新推荐文章于 2024-03-19 10:43:47 发布

阅读量5.2k

点赞数

分类专栏： # 08. Vue 文章标签： vue

本文链接：https://blog.csdn.net/wls666/article/details/115854240

版权

08. Vue 专栏收录该内容

6 篇文章 0 订阅

订阅专栏

生产环境中，在执行build命令后，vue报错 no-console，是因为使用ESLint规范。

错误截图如下：
在这里插入图片描述

方法一：

第一步：安装插件

插件：babel-plugin-transform-remove-console

npm install babel-plugin-transform-remove-console --save-dev

第二步：配置

在 babel.config.js 配置文件中添加配置:

module.exports = {
  presets: [
    '@vue/cli-plugin-babel/preset'
  ],
  plugins: [
   	// 在生产环境中 bulid  去除报错：
    // Unexpected console statement (no-console) 去除 console 中的插件
    'transform-remove-console'
  ]
}

效果图如下：
在这里插入图片描述
然后重新编译就可以了，但是这样配置并不完美，在项目开发时需要打印相应的 console 信息，应该如何配置只在项目发布阶段移除所有的console信息呢？

第三步: 进阶

在 babel.config.js 配置文件中修改配置:

// 项目发布阶段用到的 babel 插件
const prodPlugins = []
// 如果处于发布模式，才添加这个插件
if (process.env.NODE_ENV === 'production') {
  prodPlugins.push('transform-remove-console')
}
module.exports = {
  presets: [
    '@vue/cli-plugin-babel/preset'
  ],
  plugins: [
    //  ... 代表展开运算符 项目发布时的插件数组
    ...prodPlugins
  ]
}