uni-app Hbuilder打包勾选js混淆后,html页面怎么引入混淆后的js文件
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
的相对路径。如果你的服务器配置或部署路径不同,请相应调整。 - 如果你的项目使用了动态加载(如
require
或import()
),确保这些路径在打包后仍然有效。
4. 验证
- 部署你的打包后的文件到服务器或本地开发服务器。
- 打开
index.html
,确保应用能够正常运行,没有JS加载错误。
通过上述步骤,你可以在uni-app项目中正确地引入混淆后的JS文件,同时保持应用的正常运行。在实际项目中,可能还需要根据具体的项目结构和需求进行微调。