uni-app Hbuilder打包勾选js混淆后,html页面怎么引入混淆后的js文件

发布于 1周前 作者 eggper 来自 Uni-App

uni-app Hbuilder打包勾选js混淆后,html页面怎么引入混淆后的js文件

开发环境及项目信息

信息类型 内容
开发工具 HBuilderX2.6.11+
操作系统 iOS11+

HBuilderX2.6.11+版本开始,在iOS11+设备上使用WKWebview也可以支持JS原生混淆
WKWebview使用了更加严格的安全机制,使用原生混淆的js文件在html页面中必须使用自定义协议头plus-confusion://来引用:

<script type="text/javascript" src="plus-confusion://../js/common.js"></script>    
<!-- plus-confusion://后面为js文件路径,相对于当前html页面的路径 -->

自定义协议头plus-confusion://在html页面中引用js混淆后的文件,打包后页面样式混乱,就说这个文件没有正确引入


1 回复

在uni-app中使用HBuilder进行打包时,勾选js混淆选项后,HBuilder会自动处理你的JavaScript文件,将它们混淆以减小文件体积和提高代码的安全性。混淆后的JS文件通常会被放置在特定的输出目录中。为了在HTML页面中正确引入这些混淆后的JS文件,你需要确保路径正确,并且遵循HBuilder打包后的文件结构。

以下是一个基本的示例,展示如何在uni-app项目中配置和引入混淆后的JS文件。

1. 确保HBuilder正确配置

在HBuilder中,进行如下设置:

  • 打开你的uni-app项目。
  • 进入“发行”菜单。
  • 选择“网站-H5”或其他目标平台。
  • 在打包设置中,勾选“JS混淆”选项。
  • 点击“发行”按钮进行打包。

2. 打包后的文件结构

打包完成后,HBuilder会在指定的输出目录中生成混淆后的文件。假设你的项目结构如下:

/project-root
  /dist  # 打包输出目录
    /js
      app.js  # 混淆后的主JS文件
      vendor.js  # 混淆后的第三方库JS文件
    index.html  # 打包后的HTML文件

3. 修改HTML文件以引入混淆后的JS

index.html中,你需要根据打包后的文件结构来引入混淆后的JS文件。例如:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>uni-app</title>
</head>
<body>
    <div id="app"></div>
    <!-- 引入混淆后的JS文件 -->
    <script src="/js/vendor.js"></script>
    <script src="/js/app.js"></script>
</body>
</html>

注意:

  • 这里的路径/js/vendor.js/js/app.js是基于打包输出目录dist的相对路径。如果你的服务器配置或部署路径不同,请相应调整。
  • 如果你的项目使用了动态加载(如requireimport()),确保这些路径在打包后仍然有效。

4. 验证

  • 部署你的打包后的文件到服务器或本地开发服务器。
  • 打开index.html,确保应用能够正常运行,没有JS加载错误。

通过上述步骤,你可以在uni-app项目中正确地引入混淆后的JS文件,同时保持应用的正常运行。在实际项目中,可能还需要根据具体的项目结构和需求进行微调。

回到顶部
AI 助手
你好,我是IT营的 AI 助手
您可以尝试点击下方的快捷入口开启体验!