Appearance
问题现象
访问系统安装页面、后台管理界面或 H5 页面时,页面纯文字排版错乱、没有任何 CSS 样式和图标,浏览器开发者工具(F12)控制台中出现大量 .css、.js、.woff 文件的 404 Not Found 或 MIME type ('text/html') is not executable 报错。
根本原因
- 网站运行目录未设置为
public:EBAOZU V4 的入口文件和前端静态编译产物均存放于项目的public/目录下(如public/admin/、public/static/)。若宝塔或 Nginx 将网站根目录设置为了项目顶层目录而非public,静态资源请求将无法正确定位。 - Nginx 静态资源拦截规则配置不当:Nginx 中的静态资源
location规则中的root路径未指向public绝对路径,导致图片与样式请求直接被反代到了 Swoole 或请求了错误的文件路径。 - 静态资源文件缺失或权限不足:前端产物未成功打包或解压,或
public目录下的静态文件没有www读取权限(返回 403 Forbidden)。
解决步骤
检查并修正站点运行目录
- 打开宝塔面板 -> 【网站】 -> 点击目标站点设置。
- 进入【网站目录】选项卡:
- 网站目录:
/www/wwwroot/你的项目目录 - 运行目录:必须下拉选择为
/public(非常关键!)
- 网站目录:
- 点击【保存】。
检查 Nginx 静态文件配置
在站点 Nginx 配置文件中,确保静态文件规则的 root 指向项目的 public 目录:
nginx
location ~ .*\.(gif|jpg|jpeg|png|bmp|swf|ico|svg|woff|woff2|ttf|eot)$ {
root /www/wwwroot/你的项目目录/public;
expires 30d;
access_log off;
}
location ~ .*\.(js|css)?$ {
root /www/wwwroot/你的项目目录/public;
expires 12h;
access_log off;
}
location / {
proxy_pass http://127.0.0.1:20697;
proxy_http_version 1.1;
proxy_set_header Host $http_host;
proxy_set_header X-Real-IP $remote_addr;
proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
proxy_set_header Upgrade $http_upgrade;
proxy_set_header Connection "upgrade";
proxy_set_header Authori-zation $http_authori_zation;
}检查文件权限
在服务器终端中执行命令,确保 public 目录下所有静态文件具备读取权限:
bash
chmod -R 755 /www/wwwroot/你的项目目录/public
chown -R www:www /www/wwwroot/你的项目目录/public清除浏览器缓存
在浏览器中按 Ctrl + F5(Mac 用户按 Cmd + Shift + R)强制刷新页面,静态样式即可正常加载显示。