Vue/React单页面应用部署到nginx服务器时,错误解决以及刷新404

2024/10/29 11:53:08 [crit] 1543223#1543223: *8311 stat() "/home/songjj/crmI18n/dist/" failed (13: Permission denied), client: 139.226.64.118, server: _, request: "GET / HTTP/1.1", host: "47.253.55.217:8081"

2024/10/29 11:53:08 [crit] 1543223#1543223: *8311 stat() "/home/songjj/crmI18n/dist/" failed (13: Permission denied), client: 139.226.64.118, server: _, request: "GET / HTTP/1.1", host: "47.253.55.217:8081"

2024/10/29 11:53:08 [crit] 1543223#1543223: *8311 stat() "/home/songjj/crmI18n/dist/favicon.ico" failed (13: Permission denied), client: 139.226.64.118, server: _, request: "GET /favicon.ico HTTP/1.1", host: "47.253.55.217:8081", referrer: "http://47.253.55.217:8081/"

2024/10/29 11:53:08 [crit] 1543223#1543223: *8311 stat() "/home/songjj/crmI18n/dist/favicon.ico" failed (13: Permission denied), client: 139.226.64.118, server: _, request: "GET /favicon.ico HTTP/1.1", host: "47.253.55.217:8081", referrer: "http://47.253.55.217:8081/"

2024/10/29 11:53:31 [notice] 1544206#1544206: signal process started

2024/10/29 13:31:36 [crit] 1544207#1544207: *8322 stat() "/home/songjj/crmI18n/dist/" failed (13: Permission denied), client: 139.226.64.118, server: _, request: "GET / HTTP/1.1", host: "47.253.55.217:8081"

2024/10/29 13:31:36 [crit] 1544207#1544207: *8322 stat() "/home/songjj/crmI18n/dist/" failed (13: Permission denied), client: 139.226.64.118, server: _, request: "GET / HTTP/1.1", host: "47.253.55.217:8081"

1.Permission denied问题原因:

可能是没有将dist文件夹放置到var/www/目录中,因为Permission denied 错误通常是因为 Nginx 进程对 /home/xxxx/crmI18n/dist/ 目录没有足够的权限。但是对var/www目录是有访问权限的。

解决办法:

将项目部署到var/www目录中,然后修改nginx里面的root路径地址为var/www中

2.直接访问首页可以,但是跳转到登录页面等刷新之后就404了

解决办法:

这个问题可能是由于单页面应用 (SPA) 的路由配置导致的。一般来说,SPA 通过前端路由来管理页面导航,而刷新页面时,Nginx 直接尝试加载当前 URL 的资源,却找不到对应的文件,从而导致 404 错误。

可以通过配置 Nginx 将所有请求都重定向到 index.html,让前端的路由逻辑来处理 URL。以下是具体解决方案:

修改 Nginx 配置以支持 SPA 路由

将 Nginx 配置修改为以下内容,以确保所有请求都可以重定向到 index.html

bash 复制代码
server {
    listen 8081;
    server_name _;

    root /var/www/crmI18n;

    location / {
        try_files $uri $uri/ /index.html;
    }

    # 静态资源直接访问
    location /assets/ {
        try_files $uri $uri/ =404;
    }
}

解释配置

try_files $uri $uri/ /index.html; 这条指令会尝试按顺序查找请求的资源,首先查找 $uri,即用户请求的资源。如果找不到,再查找 $uri/,即资源文件夹。如果仍然找不到,则将请求重定向到 /index.html,由前端来处理路由。

更新 Nginx 配置

修改完 Nginx 配置后,执行以下命令重新加载配置:

bash 复制代码
sudo nginx -s reload 

这样,当用户在登录页面或其他页面刷新时,Nginx 会将请求重定向到 index.html,前端应用可以解析 URL 并渲染对应的页面内容。

相关推荐
爱吃奶酪的松鼠丶1 分钟前
net mvc中使用vue自定义组件遇到的坑
前端·vue.js·mvc
小威编程16 分钟前
uni-app应用级生命周期和页面级生命周期
前端·vue.js·uni-app
喝旺仔la26 分钟前
Django知识进阶
前端·html
CL_IN39 分钟前
高效集成:聚水潭奇门至金蝶云星空的数据流自动化
java·前端·自动化
Ylucius41 分钟前
14天速成前端 ------学习日志(已完结)------ 后端程序员学习了解前端
java·开发语言·前端·vue.js·学习·状态模式·1024程序员节
真是6的不行1 小时前
Hbuilder html5+沉浸式状态栏
前端·html·html5·hbuilder
熊的猫1 小时前
如何封装一个可取消的 HTTP 请求?
前端·javascript·vue.js·网络协议·http·webpack·node.js
超雄代码狂2 小时前
AJAX入门
前端·ajax
csdn小瓯2 小时前
前端八股文第一篇
前端·原型模式
风流野趣fly2 小时前
要做消息列表的颜色切换
前端