原型导出html上传后404主因是路径错误和运行环境不匹配：需检查index.html中资源相对路径、确保整文件夹上传、配置服务器路由回退、替换cdn字体为本地文件，并识别非静态html需构建后再部署。
原型导出 HTML 后直接上传会 404？检查 index.html 路径和资源引用
多数原型工具（如 Figma、Axure、墨刀）导出的 HTML 是本地运行友好的结构，但直接丢到服务器常因路径错乱导致 CSS/JS 加载失败、图片不显示。根本原因是：导出包里 index.html 中的 href 和 src 多为相对路径，且默认假设所有文件在同一级目录下。
实操建议：
立即学习“前端免费学习笔记（深入）”；
- 用浏览器打开本地
index.html，右键「查看页面源代码」，确认所有link和script标签的路径是否以./或css/等开头；如果是file:///或绝对路径（如/css/style.css），必须改掉 - 上传前把整个导出文件夹（含
css/、js/、images/）一起传，不要只传index.html - 如果服务器根目录就是你的展示入口，确保上传后访问的是
https://yourdomain.com/index.html，而不是https://yourdomain.com/—— 后者可能触发 404，除非你配置了默认首页
Figma 插件导出的 HTML 在服务器上空白？注意 __NEXT_DATA__ 和动态渲染逻辑
部分 Figma 插件（如 Anima、Framer Export）生成的 HTML 并非纯静态，而是依赖内联 JSON 数据（如 __NEXT_DATA__）或初始化脚本（main.js）来挂载 React/Vue 组件。这类 HTML 在本地双击能跑，但上传后常因跨域、CORS 或缺少构建环境而白屏。
实操建议：
立即学习“前端免费学习笔记（深入）”；
- 打开浏览器开发者工具 → Console 标签页，看是否有
ReferenceError: React is not defined或Failed to load resource: net::ERR_ABORTED类错误 - 搜索 HTML 源码中是否存在
__NEXT_DATA__、window.__INITIAL_STATE__或import语句 —— 出现这些基本说明它不是静态 HTML，而是 SSR/SSG 构建产物，不能直接上传 - 这类输出应走完整构建流程：用插件配套 CLI 打包，或导出为 ZIP 后在本地
npm install && npm run build，再上传dist/目录
上传到 Nginx/Apache 后刷新 404？配置服务器路由回退到 index.html
如果你的原型用了前端路由（比如地址栏是 /page2 却没真实对应文件），Nginx 默认会返回 404。这不是 HTML 写错了，是服务器没告诉它“所有未匹配路径都交给 index.html 处理”。
第一步】：将安装包中所有的文件夹和文件用ftp工具以二进制方式上传至服务器空间;(如果您不知如何设置ftp工具的二进制方式，可以查看：(http://www.shopex.cn/support/qa/setup.help.717.html)【第二步】：在浏览器中输入 http://您的商店域名/install 进行安装界面进行安装即可。【第二步】：登录后台，工具箱里恢复数据管理后台是url/sho
实操建议：
立即学习“前端免费学习笔记（深入）”；
- Nginx 配置里加：
location / {<br> try_files $uri $uri/ /index.html;<br>} - Apache 需启用
mod_rewrite，并在.htaccess中写：RewriteEngine On<br>RewriteBase /<br>RewriteRule ^index\.html$ - [L]<br>RewriteCond %{REQUEST_FILENAME} !-f<br>RewriteCond %{REQUEST_FILENAME} !-d<br>RewriteRule . /index.html [L] - 如果不控制服务器配置（比如用 GitHub Pages、Vercel），就别用前端路由 —— 把所有跳转改成
<a href="page2.html"></a>这种真实文件链接
上传后字体/图标加载失败？别信 fonts.googleapis.com 或 cdn.jsdelivr.net 的“在线引用”
很多原型导出时会自动引入 Google Fonts 或 Font Awesome CDN，本地开发没问题，但上线后可能被防火墙拦截、CDN 域名解析失败，或触发 CSP 策略报错 Refused to load the script。
实操建议：
立即学习“前端免费学习笔记（深入）”；
- 检查 HTML 中是否有
https://fonts.googleapis.com、https://kit.fontawesome.com这类外链，有的话先注释掉 - 下载对应字体文件（.woff2/.ttf）和 CSS，放进本地
fonts/目录，然后在 CSS 里用@font-face重写路径，指向./fonts/xxx.woff2 - 图标尽量用 SVG 内联（
<svg>...</svg>）或雪碧图，避免依赖外部 CDN
原型不是“导出即上线”，最常卡住的地方其实是路径假设和运行环境错位 —— 工具以为你在本地双击，服务器却按 Web 标准严格解析。多看一眼 Network 面板里哪些请求标红了，比反复重导更有用。
