初学者123
初学者123
  • 发布:2022-06-23 16:23
  • 更新:2022-06-27 00:28
  • 阅读:908

【报Bug】uniapp发行为 h5后,域名访问在开发者模式下,会打印页面请求数据,混淆失败

分类:uni-app

产品分类: uniapp/H5

PC开发环境操作系统: Mac

PC开发环境操作系统版本号: macOS big Sur 11.6

HBuilderX类型: 正式

HBuilderX版本号: 3.4.17

浏览器平台: Chrome

浏览器版本: 102.0.5005.115

项目创建方式: HBuilderX

操作步骤:

不能放域名,请谅解

预期结果:

不能出现请求参数打印,实现真正的混淆

实际结果:

不如预期

bug描述:

uniapp项目完成后,在 HBuilder 中点击“发行”-》网站PC-Web或手机(H5)-》发行
H5配置选择 hash 模式,相对路径:./
部署后,通过域名访问,然后在浏览器开发者模式下,发现浏览页面会将页面请求信息都打印出来。
时间:最近HBuilder 做过一次更新,以前没有出现过这个问题。

2022-06-23 16:23 负责人:无 分享
已邀请:
初学者123

初学者123 (作者) - 80后IT男

这个问题我解决了,但是确定无疑,这是一次重大 BUG,是 HBuilder 升级过程中的一次重大失误。
即使这次升级让用户有了华美的衣服,但这个缺陷就是,风一吹,就露出了屁股。

解决方案:
在根目录下创建:vue.config.js 文件,在文件中复制以下代码并保存:

module.exports = {  
    chainWebpack: (config) => {  
        // 发行或运行时启用了压缩时会生效  
        config.optimization.minimizer('terser').tap((args) => {  
            const compress = args[0].terserOptions.compress  
            // 非 App 平台移除 console 代码(包含所有 console 方法,如 log,debug,info...)  
            compress.drop_console = true  
            compress.pure_funcs = [  
                '__f__', // App 平台 vue 移除日志代码  
                // 'console.debug' // 可移除指定的 console 方法  
            ]  
            return args  
        })  
    }  
}

重新打包后,问题消失。在浏览器中域名访问,打开开发者模式,不再输出各页面的请求参数。

原文出处:https://uniapp.dcloud.io/collocation/vue-config.html

这样基础的功能,难道不默认为在打包成 H5的时候就有的吗?以前的 hbuilder版本确实有,但是这次更新丢失了。希望开发团队迅速打上这个补丁。

BoredApe

BoredApe - 有问题就会有答案。

这是你代码中哪里打印了吧 全局搜搜

  • 初学者123 (作者)

    代码中有打印啊,不过混淆后,是不是应该不显示啊?要不然发行前需要一个个把打印都注销吗?

    2022-06-23 16:33

BoredApe

BoredApe - 有问题就会有答案。

或者是不是chrome中哪里设置了打印请求log的。你换个浏览器试试还有没有了

  • 初学者123 (作者)

    chrome,safari 都是同样的问题

    2022-06-23 16:33

  • BoredApe

    回复 初学者123: 你是打包什么平台的 h5?APP ?

    2022-06-23 16:53

  • 初学者123 (作者)

    回复 BoredApe: 打包成 h5,部署到服务器上,通过域名访问

    2022-06-23 16:57

BoredApe

BoredApe - 有问题就会有答案。

你可以使用webpack插件自行处理一下console.log

// vue.config.js  
const TerserPlugin = require("terser-webpack-plugin");  
module.exports = {  
  configureWebpack: {  
    plugins: [  
      new TerserPlugin({  
        terserOptions: {  
          compress: {  
            pure_funcs: ["console.log"]  
          }  
        }  
      })  
    ]  
  }  
}

terser-webpack-plugin插件vue-cli自带不需要再安装

  • 初学者123 (作者)

    谢谢,这段代码,放在哪里呢?

    2022-06-23 17:35

  • 初学者123 (作者)

    再次感谢你提供的线索。你推荐的方法,打包时报错,说是找不到插件。非常感谢

    2022-06-23 18:43

初学者123

初学者123 (作者) - 80后IT男

因为是多个项目,发现后来打包的项目,问题复现了,即使加了 vue.config.js
推测根本原因,是 hbuilder 在发行为 h5时,取消了原来的混淆选项,这是一项重大bug,希望官方加紧解决!!!
现在用 hbuilder 发行为 h5,网站实际上是在裸奔!!!

要回复问题请先登录注册