Vue3生产环境移除调试代码时UglifyJsPlugin导致router-link失效求解

问题根源 #

UglifyJsPlugin已停止维护，仅支持ES5语法，Vue3及配套vue-router v4的源码包含大量ES6+语法，压缩过程中会被错误转译，导致router-link组件逻辑异常无法渲染。

修复UglifyJsPlugin导致的router-link异常 #

推荐直接替换UglifyJsPlugin为兼容ES6+语法的terser-webpack-plugin，webpack5及Vue CLI 4+版本已内置该压缩工具，无需额外适配：

1. 卸载原有uglify插件：
   npm uninstall uglifyjs-webpack-plugin --save-dev
2. 安装terser插件（如果项目未内置的话）：
   npm install terser-webpack-plugin --save-dev
3. 修改vue.config.js配置：

const TerserPlugin = require('terser-webpack-plugin')
const isProd = process.env.NODE_ENV === 'production'

module.exports = {
  configureWebpack: {
    optimization: {
      minimizer: isProd ? [
        new TerserPlugin({
          terserOptions: {
            compress: {
              // 生产环境移除debugger和console
              drop_debugger: true,
              drop_console: true
            }
          }
        })
      ] : []
    }
  }
}

如果必须保留UglifyJsPlugin，可在vue.config.js中添加配置将vue、vue-router列入babel转译范围，该方案会增加编译耗时，不推荐：

module.exports = {
  transpileDependencies: ['vue', 'vue-router']
  // 原有uglify配置保持不变
}

其他生产环境移除debugger和console的方案 #

1. 复用Vue CLI内置的terser配置 #

无需额外安装插件，直接通过chainWebpack修改默认压缩配置即可：

module.exports = {
  chainWebpack: config => {
    if (process.env.NODE_ENV === 'production') {
      config.optimization.minimizer('terser').tap(args => {
        args[0].terserOptions.compress.drop_debugger = true
        args[0].terserOptions.compress.drop_console = true
        return args
      })
    }
  }
}

2. 用babel插件在编译阶段移除 #

安装babel-plugin-transform-remove-console，在babel编译时直接擦除console相关代码，兼容性更高：

1. 安装插件：
   npm install babel-plugin-transform-remove-console --save-dev
2. 修改babel.config.js配置：

const isProd = process.env.NODE_ENV === 'production'
module.exports = {
  presets: ['@vue/cli-plugin-babel/preset'],
  plugins: isProd ? ['transform-remove-console'] : []
}

3. 全局重写console方法（临时方案） #

在入口文件main.js最顶部添加如下代码，仅屏蔽console输出，不会减少产物体积：

if (process.env.NODE_ENV === 'production') {
  // 屏蔽所有console输出
  Object.assign(console, {
    log: () => {},
    info: () => {},
    warn: () => {},
    error: () => {},
    debug: () => {}
  })
}

内容的提问来源于stack exchange，提问作者Vadim T