讲师中心 微信公众号
AI工具推荐 视频效率加速

OpenClaw部署后静态资源加载失败怎么办?

冬婷小哥_2485

冬婷小哥_2485

发布时间:2026-07-30 15:39:26

|

614人浏览过

|

来源于php中文网

原创

OpenClaw部署后页面白屏且静态资源404,根本原因是前端构建产物路径与Nginx路由映射不匹配:若dist目录含/static/js/但服务未将/static/映射至dist/static/,或publicPath配置为绝对路径导致HTML中资源路径错误,均会引发404;须检查构建输出结构、统一设publicPath为'./'、并用root或alias正确配置Nginx静态资源路由。

☞☞☞AI 智能聊天, 问答助手, AI 智能搜索, 多模态理解力帮你轻松跨越从0到1的创作门槛☜☜☜

openclaw部署后静态资源加载失败怎么办?

OpenClaw部署后页面白屏或按钮图标不显示,浏览器控制台报错Failed to load resource: the server responded with a status of 404 (),/static/js/main.789xyz.js、/assets/icon.svg等路径全部404,说明前端构建产物未被正确服务——这不是代码bug,而是资源路由映射断裂。

确认构建产物中静态资源的真实路径结构

进入OpenClaw项目构建输出目录(通常是dist或build),执行ls -R | grep -E "\.(js|css|svg|png)$",观察文件是否真实存在于子路径中。若看到dist/static/js/main.789xyz.js但浏览器请求的是/static/js/main.789xyz.js,则说明服务端未将/static/映射到dist/static/;若dist下根本没有static目录,而是直接有js/和assets/,则说明构建时publicPath配置错误,必须回退修改再重新build。

这一步不能跳过。很多团队直接拷贝dist内容到Nginx html目录,却没检查内部层级是否与HTML中<script>标签的src路径一致。</script>

修复Nginx对OpenClaw静态资源的路由映射

方法一:用root指令直指dist根目录(推荐)

在Nginx server块中添加:location / { root /path/to/your/openclaw/dist; try_files $uri $uri/ /index.html; }

注意:【root路径末尾不加斜杠】,且该路径必须是dist的绝对路径(如/var/www/openclaw/dist),不是dist的父目录。写成root /var/www/openclaw/会导致所有静态资源请求多拼一层dist,变成/dist/static/js/…而404。

方法二:用alias精确匹配静态资源前缀

当需保留API代理共存时,单独处理静态资源:location ^~ /static/ { alias /path/to/openclaw/dist/static/; } location ^~ /assets/ { alias /path/to/openclaw/dist/assets/; }

OpenClaw Backup Rclone
OpenClaw Backup Rclone

自动备份 OpenClaw 整体配置到远程存储(支持任意 rclone 后端:COS、S3、FTP、SFTP、WebDAV等)。 触发场景: - 创建/配置自动备份任务 - 设置备份周期、保留份数、目标目录 - 手动触发备份 - 查看/恢复备份 - OpenClaw 运行异常时的提醒

下载

注意:【alias路径末尾必须加斜杠】,否则Nginx会把/assets/logo.svg解析为/path/to/openclaw/dist/assetslogo.svg(缺/导致路径粘连)。

强制修正前端构建时的publicPath

第一步:打开OpenClaw项目的构建配置文件

若为Vue CLI项目,编辑vue.config.js;若为Vite项目,编辑vite.config.ts;若为Webpack原生配置,定位webpack.config.js中的output.publicPath。

第二步:将publicPath统一设为相对路径

Vue CLI:module.exports = { publicPath: './' };Vite:export default defineConfig({ base: './' })。绝对路径如'/openclaw/'或'/'极易与反向代理路径冲突,尤其当OpenClaw部署在子路径(如https://example.com/claw/)时,必须配合Nginx location重写,复杂度陡增。

第三步:删除dist目录 → 重新npm run build → 验证dist内所有HTML中script与link标签的src/href均以./开头(如./static/js/main.js),而非/static/js/main.js或/ static/js/main.js。

这一步操作起来很简单,直接把文件拖进去就行。但漏掉会导致后续所有Nginx配置都无效——因为请求路径从源头就错了。

热门AI工具

更多
Lovart
Lovart Hot

一款面向视觉设计创作的AI设计平台,可通过智能体和画布工作流辅助制作海报、Logo、网页、PPT及其他视觉内容。

Loomy
Loomy Hot

一款AI工具,主要用于科大讯飞发布的桌面级 AI 助理,比 OpenClaw 更易用、更安全!,适合需要提升相关任务效率的用户。

墨刀AI
墨刀AI Hot

一款AI图像与设计工具,主要用于产品经理的专属智能体,适合需要提升相关任务效率的用户。

讯飞绘文

讯飞绘文是一款由科大讯飞推出的一站式 AIGC 内容运营平台。

豆包大模型

豆包大模型是一款由字节跳动推出的企业级大语言模型服务平台。

立刻MV
立刻MV Hot

立刻MV是一款AI文本写作工具,AI 音乐视频(MV)创作工具。

WorkBuddy

一款AI办公效率工具,主要用于腾讯云推出的AI原生桌面智能体工作台,适合需要提升相关任务效率的用户。

DeepSeek

DeepSeek是一款面向对话、写作、编程和推理场景的AI大模型工具。

音述AI
音述AI Hot

一款AI音频处理工具,主要用于音述AI是一个以“用声音述说故事”为核心的 AI 音乐创作与声音分享社区,适合需要提升相关任务效率的用户。

相关专题

更多
OpenClaw如何卸载
OpenClaw如何卸载

《OpenClaw如何卸载?OpenClawAI小龙虾安全卸载最新指南》为您提供详尽、安全的卸载步骤,帮助用户彻底移除OpenClaw及其相关组件。本指南针对Windows与macOS系统分别说明操作流程,涵盖停止后台进程、清除配置文件、删除残留数据等关键环节,确保无痕卸载,避免系统冲突或隐私泄露。无论您是因更换工具、解决兼容问题,还是出于安全考虑,本文都将助您高效、安心地完成卸载操作。请务必按照最新版本指引执行,以保障设备稳定与数据安

140

2026.03.19

OpenClaw安装部署教程
OpenClaw安装部署教程

本合集涵盖2026最新版OpenClaw(小龙虾)本地部署全流程,适用于Windows系统,包含环境配置、模型接入、Web界面启动及飞书/Telegram/QQ等多平台对接。无论你是小白还是开发者,10分钟内即可完成安装,快速体验AI智能体“长手干活”的强大能力!

201

2026.03.19

OpenClaw初学者教程:如何使用和设置
OpenClaw初学者教程:如何使用和设置

《OpenClawAI初学者教程:如何使用和设置》是一套面向新手的入门指南,涵盖环境搭建、基础配置、模型加载及简单推理操作。通过本教程,你将快速掌握OpenClawAI的核心功能,轻松开启AI开发之旅。

141

2026.03.19

OpenClawAI技能系统基础介绍:OpenClawAISkills是什么
OpenClawAI技能系统基础介绍:OpenClawAISkills是什么

OpenClawAI Skills 是 OpenClaw 智能体的核心功能模块,用于定义和管理 AI 可执行的具体能力,如查询天气、发送消息、操作文件等。通过技能系统,用户可灵活扩展智能体功能,实现高度定制化的自动化任务。

858

2026.03.20

龙虾OpenClaw安全使用指南
龙虾OpenClaw安全使用指南

围绕龙虾OpenClawAI使用中的安全风险,本合集系统梳理常见漏洞与隐患,提供实用防护方法与最新安全指南,帮助用户在稳定运行的同时规避风险,提升整体使用安全性与体验。

149

2026.03.20

openclaw养虾硬件指南最新版
openclaw养虾硬件指南最新版

《OpenClawAI硬件指南最新版》合集聚焦AI硬件入门与进阶,从核心组件解析到实战搭建,系统讲解算力配置、设备选型与优化方案。内容通俗易懂,适合开发者与科技爱好者快速掌握AI硬件要点,构建高效稳定的智能计算环境。

428

2026.03.20

OpenClaw从新手到中级完整教程
OpenClaw从新手到中级完整教程

本专题专为零基础用户设计,带你从环境搭建到实战应用,系统掌握开源AI Agent OpenClaw。内容涵盖Node.js/Docker安装、API配置、Skills技能扩展及多平台集成,通过整理文件、自动化办公等真实案例,助你快速上手。无论你是想提升效率的职场人还是技术爱好者,都能在此找到从入门到精通的完整路径,打造专属的本地化AI助手。

982

2026.05.06

OpenClaw免费大模型调用指南
OpenClaw免费大模型调用指南

PHP中文网特设OpenClaw免费大模型专区,提供详尽调用指南。涵盖免费API申请、模型配置及本地部署教程,助您零成本畅享AI智能体验。无论是新手入门还是进阶应用,这里都有实用干货,轻松跨越创作门槛,开启高效智能办公新方式。

139

2026.06.29

C++运算符基础入门
C++运算符基础入门

本专题详细讲解了C++运算符的类型、语法与使用方法,涵盖算术运算符、关系运算符、逻辑运算符、位运算符、赋值运算符、条件运算符及其他特殊运算符,并通过代码示例解析优先级与结合性。

0

2026.10.09

热门下载

更多
网站特效
/
网站源码
/
网站素材
/
前端模板

精品课程

更多
相关推荐
/
热门推荐
/
最新课程
关于我们 免责申明 举报中心 意见反馈 讲师合作 广告合作 最新更新
php中文网:公益在线php培训,帮助PHP学习者快速成长!
关注服务号
PHP中文网订阅号
每天精选资源文章推送

Copyright 2014-2026 https://www.php.cn/ All Rights Reserved | php.cn