当项目开发完成,打包上线时Vue报错:‘Unexpected console statement (no-console)’

这是因为在发布项目时 ESLint 不允许使用 console

记录下解决办法

方法一

在配置文件eslintrc.js中增加规则 'no-console': [true, 'log', 'error']

module.exports = {
  root: true,
  env: {
    node: true
  },
  extends: ['plugin:vue/essential', '@vue/standard'],
  parserOptions: {
    parser: 'babel-eslint'
  },
  rules: {
    indent: ['off', 2],
    'no-console': process.env.NODE_ENV === 'production' ? 'error' : 'off',
    'no-debugger': process.env.NODE_ENV === 'production' ? 'error' : 'off',
    'space-before-function-paren': 0,
    'no-console': [true, 'log', 'error'],
    semi: 0
  }
}

这样虽然能够正常打包,但是实际部署时最好是不要出现 console.

方法二

使用依赖 babel-plugin-transform-remove-console

搜索安装依赖后在配置文件babel.config.js中引用

module.exports = {
  presets: ['@vue/cli-plugin-babel/preset'],
  plugins: [
    [
      'component',
      {
        libraryName: 'element-ui',
        styleLibraryName: 'theme-chalk'
      }
    ],
    'transform-remove-console'
  ]
}

这样做虽然能解决问题,但在开发阶段 console 也会被删除,不方便开发调试,这里介绍方法三

方法三

使用依赖 babel-plugin-transform-remove-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: [
    [
      'component',
      {
        libraryName: 'element-ui',
        styleLibraryName: 'theme-chalk'
      }
    ],
    // 发布产品时候的插件数组
    ...prodPlugins
  ]
}

这样就能只在发布阶段删除 console ,开发阶段不受影响