前后端分离部署部分页面404

moye Lv6
  2024-08-20 11:07:10 2024-08-20 11:07:10 创建   2025-12-11 14:39:48 2025-12-11 14:39:48 更新      

  1. 前端路由配置问题：

    • Vue 通常使用前端路由（如 Vue Router）。确保在部署时服务器能够正确处理这些路由。可以配置 Nginx 或 Apache，将所有未找到的路径重定向到 index.html。

  2. Nginx/Apache 配置问题：

    • 检查 Nginx 或 Apache 的配置文件，确保路径重定向正确。
    • 确保静态资源路径配置正确。

  3. 资源路径问题：

    • 确认打包后的静态资源路径正确。Vue 项目打包时需要确保 base 配置正确。

  4. 跨域问题：

    • 确保后端服务器设置了正确的跨域策略。

  5. 打包配置问题：

    • 检查 Vue 项目的 vue.config.js 中的 publicPath 设置，确保在生产环境下路径配置正确。

  6. 缓存问题：

    • 清理浏览器缓存，确保加载最新的资源。

解决步骤

  • 配置 Nginx 示例：
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
server {
    listen 80;
    server_name your_domain.com;

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

    location /api/ {
        proxy_pass http://localhost:8080; # Spring Boot 运行地址
        proxy_set_header Host $host;
        proxy_set_header X-Real-IP $remote_addr;
        proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
    }
}
  • 后端跨域设置：
1
2
3
4
5
6
7
8
9
10
11
@Configuration
public class WebConfig implements WebMvcConfigurer {

    @Override
    public void addCorsMappings(CorsRegistry registry) {
        registry.addMapping("/**")
                .allowedOrigins("http://your_domain.com")
                .allowedMethods("GET", "POST", "PUT", "DELETE")
                .allowCredentials(true);
    }
}

404的nginx配置文件

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72

server  
{  
listen 80;  
listen 443 ssl http2 ;  
server\_name bi.kanes.top;  
index index.php index.html index.htm default.php default.htm default.html;  
root /www/wwwroot/bi.kanes.top/dist;  
#CERT-APPLY-CHECK--START  
\# 用于SSL证书申请时的文件验证相关配置 -- 请勿删除  
include /www/server/panel/vhost/nginx/well-known/bi.kanes.top.conf;  
#CERT-APPLY-CHECK--END
#SSL-START SSL相关配置，请勿删除或修改下一行带注释的404规则
#error_page 404/404.html;
ssl_certificate    /www/server/panel/vhost/cert/bi.kanes.top/fullchain.pem;
ssl_certificate_key    /www/server/panel/vhost/cert/bi.kanes.top/privkey.pem;
ssl_protocols TLSv1.1 TLSv1.2 TLSv1.3;
ssl_ciphers EECDH+CHACHA20:EECDH+CHACHA20-draft:EECDH+AES128:RSA+AES128:EECDH+AES256:RSA+AES256:EECDH+3DES:RSA+3DES:!MD5;
ssl_prefer_server_ciphers on;
ssl_session_cache shared:SSL:10m;
ssl_session_timeout 10m;
add_header Strict-Transport-Security "max-age=31536000";
error_page 497  https://$host$request_uri;

#SSL-END

#ERROR-PAGE-START  错误页配置，可以注释、删除或修改
#error_page 404 /404.html;
#error_page 502 /502.html;
#ERROR-PAGE-END

#PHP-INFO-START  PHP引用配置，可以注释或修改
include enable-php-00.conf;
#PHP-INFO-END

#REWRITE-START URL重写规则引用,修改后将导致面板设置的伪静态规则失效
include /www/server/panel/vhost/rewrite/bi.kanes.top.conf;
#REWRITE-END

#禁止访问的文件或目录
location ~ ^/(\.user.ini|\.htaccess|\.git|\.env|\.svn|\.project|LICENSE|README.md)
{
    return 404;
}

#一键申请SSL证书验证目录相关设置
location ~ \.well-known{
    allow all;
}

#禁止在证书验证目录放入敏感文件
if ( $uri ~ "^/\.well-known/.*\.(php|jsp|py|js|css|lua|ts|go|zip|tar\.gz|rar|7z|sql|bak)$" ) {
    return 403;
}

location ~ .*\.(gif|jpg|jpeg|png|bmp|swf)$
{
    expires      30d;
    error_log /dev/null;
    access_log /dev/null;
}

location ~ .*\.(js|css)?$
{
    expires      12h;
    error_log /dev/null;
    access_log /dev/null;
}
access_log  /www/wwwlogs/bi.kanes.top.log;
error_log  /www/wwwlogs/bi.kanes.top.error.log;

}

分析可能的远因

  1. 缺少前端路由配置：

    • 确保未匹配路径重定向到 index.html。可以在 server 块中添加以下配置：
1
2
3
location / {
    try_files $uri $uri/ /index.html;
}

  1. PHP 配置：

    • include enable-php-00.conf; 这行可能不需要，除非你确实有 PHP 后端。

  2. SSL 和重定向：

    • 确保 SSL 和重定向配置正确。

修改后的配置示例

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
server {
    listen 80;
    listen 443 ssl http2;
    server_name bi.kanes.top;
    index index.html index.htm;
    root /www/wwwroot/bi.kanes.top/dist;

    # SSL configuration
    ssl_certificate /www/server/panel/vhost/cert/bi.kanes.top/fullchain.pem;
    ssl_certificate_key /www/server/panel/vhost/cert/bi.kanes.top/privkey.pem;
    ssl_protocols TLSv1.1 TLSv1.2 TLSv1.3;
    ssl_ciphers EECDH+CHACHA20:EECDH+AES128:RSA+AES128:EECDH+AES256:RSA+AES256:EECDH+3DES:RSA+3DES:!MD5;
    ssl_prefer_server_ciphers on;
    ssl_session_cache shared:SSL:10m;
    ssl_session_timeout 10m;
    add_header Strict-Transport-Security "max-age=31536000";
    error_page 497 https://$host$request_uri;

    # Frontend routing
    location / {
        try_files $uri $uri/ /index.html;
    }

    # Static files caching
    location ~ .*\.(gif|jpg|jpeg|png|bmp|swf)$ {
        expires 30d;
        error_log /dev/null;
        access_log /dev/null;
    }

    location ~ .*\.(js|css)?$ {
        expires 12h;
        error_log /dev/null;
        access_log /dev/null;
    }

    # Log files
    access_log /www/wwwlogs/bi.kanes.top.log;
    error_log /www/wwwlogs/bi.kanes.top.error.log;
}

这样修改之后解决问题的原因主要是：

  1. 前端路由支持：

    • try_files $uri $uri/ /index.html; 这行配置确保所有未匹配到的路径都被重定向到 index.html。这对于使用 Vue Router 的单页应用（SPA）非常重要，因为它依赖浏览器的历史记录 API 进行客户端路由。

  2. 简化配置：

    • 移除了不必要的 PHP 配置，避免了可能的误导和干扰。

  3. 静态资源缓存：

    • 为静态文件设置缓存，有助于提高加载速度，但不会影响路由功能。
  • 标题: 前后端分离部署部分页面404
  • 作者: moye
  • 创建于 : 2024-08-20 11:07:10
  • 更新于 : 2025-12-11 14:39:48
  • 链接: https://www.kanes.top/2024/08/20/前后端分离部署部分页面404/
  • 版权声明: 本文章采用 CC BY-NC-SA 4.0 进行许可。
评论
目录
前后端分离部署部分页面404
  1. 1. 解决步骤
  2. 2. 404的nginx配置文件
  3. 3. 分析可能的远因
    1. 3.1. 修改后的配置示例