当前位置：首页 > 前端开发 > 正文

Axure导出HTML后如何本地打开？

在Axure中点击“发布”按钮，选择“生成HTML文件”，设置保存位置后导出，打开导出的文件夹，双击其中的“index.html”文件即可在浏览器中查看原型。

Axure RP 是一款强大的原型设计工具，导出 HTML 文件后可在浏览器中直接演示交互效果，便于团队评审或用户测试，以下是详细操作指南：

导出 HTML 文件步骤（以 Axure RP 10 为例）

完成原型设计
确保所有页面、交互逻辑和动态面板已配置完毕。
进入导出设置
- 顶部菜单栏点击 “发布” → 选择 “生成 HTML 文件”（或快捷键 F8）。
- 弹出窗口中设置导出路径（如桌面或指定文件夹）。
配置导出选项
- “常规” 标签页
  - 选择导出范围：当前页面、所有页面或自定义页面。
  - 勾选 “生成 HTML 文件时打开目录”（导出后自动打开文件夹）。
- “页面” 标签页
  - 设置默认起始页（如 Home.page）。
  - 启用 “侧边导航栏” 方便页面切换。
- “高级” 标签页（关键设置）
  - “无需托管”：勾选此项（避免资源加载问题）。
  - “插件”：取消勾选（除非需要 Axure 浏览器扩展）。
  - “字体”：嵌入本地字体避免显示异常。
生成 HTML
点击 “生成” 按钮，等待进度条完成，成功后会弹出包含 index.html 的文件夹。

直接浏览器打开
- 双击 index.html 文件（默认用默认浏览器打开）。
- 注意：部分浏览器（如 Chrome）可能因安全限制阻止资源加载，需手动允许：
  - 地址栏右侧点击 “盾牌图标” → 选择 “加载不安全脚本”。
通过本地服务器运行（推荐）
解决跨域限制问题，适用于复杂交互原型：
- 安装轻量服务器工具（如 Live Server VS Code 插件）：
```
# 若已安装 Node.js，可通过命令启动：
npx live-server [导出文件夹路径]
```
- 访问 http://localhost:8080 查看原型。
上传至云服务
将整个导出文件夹上传至 Axure Cloud、阿里云 OSS 等平台，生成在线链接分享。

问题1：打开后页面空白
原因：浏览器拦截了本地脚本。
解决：按上述方法允许加载脚本，或使用本地服务器运行。
问题2：图片/字体未加载
原因：资源路径错误或未嵌入。
解决：
1. 导出时勾选 “嵌入本地字体”。
2. 检查图片是否为绝对路径（建议用相对路径）。
3. 确保图片文件在 resources 文件夹内。
问题3：交互失效
原因：浏览器插件冲突或 Axure 版本兼容问题。
解决：
1. 禁用广告拦截插件。
2. 升级 Axure 至最新版本（官网下载）。