axure怎么生成html_Axure原型导出HTML文件步骤【教程】

9次阅读

axure 怎么生成 html_Axure 原型导出 HTML 文件步骤【教程】

Axure 导出的 HTML 不是真正可部署的网页,它依赖本地运行环境和 Axure 自带的 JS 库,不能直接扔到服务器上当网站用。

导出时选错发布类型:误用“生成器”而非“HTML 文件”

Axure 的导出菜单里有两个名字接近的选项:Generate HTML FilesPreview in Browser(或某些版本叫 Generate Prototype)。前者才是生成静态 HTML 文件的正确路径;后者只是本地临时预览,生成的文件夹结构不完整、缺少 data.jsaxurerp.js,直接打开 index.html 会白屏或报 ReferenceError: $axure is not defined

  • 务必点击顶部菜单 Projects → Generate HTML Files……
  • 弹窗中确认勾选 Include all pagesInclude interactions
  • 输出目录选空文件夹,避免旧文件残留干扰

交互失效或跳转异常:JS 资源路径被浏览器拦截

导出的 HTML 默认用相对路径加载 axurerp.jsdata.js 等资源。如果双击 index.html 在 Chrome/Firefox 中打开,浏览器因安全策略会阻止本地 JS 执行,表现为页面空白、按钮无响应、动态面板不切换。

  • 必须通过 HTTP 服务访问:用 python3 -m http.server 8000 启一个本地服务,再打开 http://localhost:8000/index.html
  • 不要改 index.html 里的 src 路径——Axure 生成的路径已适配,手动改错反而导致 Failed to load resource: net::ERR_FILE_NOT_FOUND
  • 若需部署到 Nginx/Apache,请确保整个导出文件夹(含 resources/data.js)整体上传,且服务器未开启目录浏览限制

中文乱码或字体异常:导出设置没关“Unicode 编码”

Axure 默认对非 ASCII 字符启用 Unicode 编码(即把汉字转成 u4f60u597d 形式),但部分老版本浏览器或嵌入场景下解码失败,显示为方框或空白。

立即学习 前端免费学习笔记(深入)”;

  • 导出前进入 Projects → HTML Generation Settings……
  • 取消勾选 Use Unicode encoding for text
  • 重新导出,此时 data.js 中的文本将保持明文 UTF-8,兼容性更好
  • 注意:该选项关闭后,若原型里用了特殊符号(如 emoji),可能在低版本 IE 中显示异常,但现代浏览器基本无影响

真正麻烦的不是导出动作本身,而是后续调试时分不清是 Axure 逻辑问题、JS 加载失败,还是服务器配置漏了 MIME 类型——比如 data.js 被 Nginx 当作纯文本返回,没设 application/javascript,Chrome 就会静默忽略执行。

text=ZqhQzanResources