解决vue编译时错误 - error: Unexpected console statement (no-console)

最新推荐文章于 2025-03-24 16:21:43 发布

原创最新推荐文章于 2025-03-24 16:21:43 发布 · 1.6k 阅读

0 ·

CC 4.0 BY-SA版权

前端专栏收录该内容

14 篇文章

订阅专栏

本文介绍了解决Vue项目中编译时出现的console.log错误的方法，通过配置.eslintrc.js文件来禁用no-console规则。同时，为了进一步优化生产环境的构建，文章还介绍了如何使用terser-webpack-plugin插件移除console.log，减少运行时开销。

解决vue编译时错误

error: Unexpected console statement (no-console)

修复办法

修改 .eslintrc.js

module.exports = {
  root: true,
  env: {
    node: true
  },
  extends: ["plugin:vue/essential", "@vue/prettier", "@vue/typescript"],
  rules: {
    // "no-console": process.env.NODE_ENV === "production" ? "error" : "off",
    "no-console": "off",
    "no-debugger": process.env.NODE_ENV === "production" ? "error" : "off"
  },
  parserOptions: {
    parser: "@typescript-eslint/parser"
  }
};

去掉console.log等

但是仅仅去掉eslint错误，并不能解决console.log的运行时开销，我们需要去掉它们，当然不能手工去掉，这样工作量大，而且影响源码版本管理。可以使用terser来做这个工作。

安装terser-webpack-plugin
npm install terser-webpack-plugin --save-dev
添加或修改vue.config.js

const TerserPlugin = require('terser-webpack-plugin');
module.exports = {
    publicPath: process.env.NODE_ENV === 'production' ? '/file-browser/' : '/',
    configureWebpack: (config) => {
        if (process.env.NODE_ENV === 'production') {
            return {
                optimization: {
                    minimizer: [new TerserPlugin({
                        terserOptions: {
                            compress: {
                                drop_console: true
                            }
                        }
                    })]
                },
            }
        }
    }
}