uniapp 打包如何去除log日志

在uniapp打包发布时，如何彻底去除console.log等调试日志？项目中用了很多日志输出方便开发，但正式环境需要清除。尝试过在manifest.json配置"minification"和"uglify"选项，但部分日志仍会输出。请问除了手动删除代码外，是否有更高效的配置方案或编译插件可以实现自动去除？

2 回复

在uniapp中，可以通过以下方式去除log日志：

  1. 生产环境打包时，在manifest.json中设置"debug": false
  2. 在vue.config.js中配置：
module.exports = {
  chainWebpack: config => {
    config.optimization.minimize(true)
  }
}

这样打包时就会自动移除console.log等调试代码。


在 UniApp 中去除打包后的日志输出，可以通过以下方法实现，确保生产环境代码更简洁、安全：

1. 条件编译去除 console 日志

在代码中使用条件编译，仅在开发环境保留 console 语句，生产环境自动移除：

// #ifdef H5
console.log('调试信息'); // 仅H5平台开发环境显示
// #endif

// 或通用写法（所有平台）：
// #ifndef MP-WEIXIN
console.log('跨平台日志');
// #endif

2. 配置 vue.config.js 移除 console

在项目根目录创建或修改 vue.config.js，通过 webpack 配置在生产构建时自动删除 console：

module.exports = {
  chainWebpack: (config) => {
    config.optimization.minimizer('terser').tap((args) => {
      args[0].terserOptions.compress.drop_console = true; // 移除所有 console
      return args;
    });
  }
};

3. 使用环境变量控制

在 main.js 中根据环境变量动态禁用日志：

// 生产环境关闭日志
if (process.env.NODE_ENV === 'production') {
  console.log = () => {}; // 重写 console.log 为空函数
  console.warn = () => {};
  console.error = () => {}; // 可选：保留 error 日志
}

4. HBuilderX 可视化配置

  • 打开项目 → manifest.json → 源码视图
  • 在 "app-plus" 或 "mp-weixin" 节点添加：
"optimization": {
  "dropConsole": true
}

注意事项：

  • 测试验证：打包后需真机测试确认日志已清除。
  • 错误日志：建议保留 console.error 以便追踪生产环境问题。
  • 条件编译：精确控制各平台日志，避免影响功能。

推荐使用 方法2（vue.config.js），兼容性最好且无需手动修改代码。

回到顶部