将交互原型转换为HTML文件并部署到服务器，是产品验收前常用的手段。它能让团队成员通过浏览器直接访问高保真演示，而不依赖本地设计软件。整个过程分为本地导出与远端传输两个阶段，每个阶段都有一些容易忽略的细节。
一、从原型工具导出HTML文件
目前主流的原型工具如Axure RP、Figma、墨刀都支持导出静态HTML。以Axure为例，在菜单栏选择“发布”然后点击“生成HTML文件”，会弹出设置面板。这里最关键的是“包含”选项，需要勾选“将图片嵌入HTML”或保持“使用相对路径”的文件夹结构，否则上传后图片会显示为裂图。
另一个常见误区是忽略移动端视口设置。如果原型包含手机页面，应在生成时勾选“移动设备配置”，让导出的页面自动适配屏幕宽度。生成完成后，工具会输出一个文件夹，里面至少有index.html、一个css目录、js目录和images目录。这个文件夹就是后续要整体上传的单位，不能只传index.html。
<!-- Axure导出的index.html片段示例 --> <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <link rel="stylesheet" href="css/style.css"> </head> <body> <div id="page">原型内容</div> <script src="js/script.js"></script> </body> </html>
二、准备服务器环境
在上传之前，必须确认服务器已经安装并运行了Web服务软件。对于Linux系统，Nginx和Apache是最常见的选择。如果是云主机，还需在安全组中放行80（HTTP）或443（HTTPS）端口，否则外部无法访问。同时，Web根目录（如Nginx默认的/usr/share/nginx/html）对所属用户要有写入权限，一般设为755即可，过松的777权限反而会带来安全风险。
很多新手在连接服务器时搞不清协议区别。FTP适合图形化工具，但需要服务器额外装vsftpd；SCP基于SSH，只要你能ssh登录就可以用，更加安全。下面以Nginx为例，展示一段最简配置，它把根目录指向我们即将上传的proto文件夹。
server {
listen 80;
server_name example.ipipp.com;
root /usr/share/nginx/html/proto;
index index.html;
location / {
try_files $uri $uri/ =404;
}
}
三、上传HTML文件到服务器
使用FileZilla这类FTP客户端时，在“主机”填写服务器IP，端口填21或22（SFTP），输入用户名密码后进入远程目录，把本地整个原型文件夹拖到右侧Web根目录下即可。传输模式建议选“被动模式”，能避开大部分企业防火墙限制。若用命令行，scp则更为直接。
下面的命令把本地axure_output文件夹整体推送到服务器的proto目录。注意冒号前是登录凭证，后面是绝对路径，且远程目录必须已存在。传输完用浏览器打开对应地址，若看到原型首页说明链路打通。
# 本地终端执行，将文件夹递归复制到服务器 scp -r ./axure_output user@192.168.0.1:/usr/share/nginx/html/proto
四、验证与常见问题排查
上传后访问页面若出现403，多半是目录权限不足或index文件名字不对；404则可能是路径拼错，比如把proto写成protot。还有一种隐蔽问题是资源用了绝对路径“/css/style.css”，但实际放在子目录，此时要回到导出设置改用相对路径重新生成。
如果原型中有中文，务必确认HTML头部写了<meta charset="utf-8">，服务器也以utf-8发送，否则会乱码。最后建议用浏览器开发者工具的“网络”面板，检查所有css、js、图片状态码是否都是200，这样才算真正完成了从原型到线上演示的闭环。