前后端分离部署部分页面404 - 我要做个offer收割机！！！！！

前端路由配置问题：
- Vue 通常使用前端路由（如 Vue Router）。确保在部署时服务器能够正确处理这些路由。可以配置 Nginx 或 Apache，将所有未找到的路径重定向到 index.html。
Nginx/Apache 配置问题：
- 检查 Nginx 或 Apache 的配置文件，确保路径重定向正确。
- 确保静态资源路径配置正确。
资源路径问题：
- 确认打包后的静态资源路径正确。Vue 项目打包时需要确保 base 配置正确。
跨域问题：
- 确保后端服务器设置了正确的跨域策略。
打包配置问题：
- 检查 Vue 项目的 vue.config.js 中的 publicPath 设置，确保在生产环境下路径配置正确。
缓存问题：
- 清理浏览器缓存，确保加载最新的资源。

解决步骤

配置 Nginx 示例：

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;
    }
}

后端跨域设置：

@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配置文件


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;

}

分析可能的远因

缺少前端路由配置：
- 确保未匹配路径重定向到 index.html。可以在 server 块中添加以下配置：

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

PHP 配置：
- include enable-php-00.conf; 这行可能不需要，除非你确实有 PHP 后端。
SSL 和重定向：
- 确保 SSL 和重定向配置正确。

修改后的配置示例

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;
}

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

前端路由支持：
- try_files $uri $uri/ /index.html; 这行配置确保所有未匹配到的路径都被重定向到 index.html。这对于使用 Vue Router 的单页应用（SPA）非常重要，因为它依赖浏览器的历史记录 API 进行客户端路由。
简化配置：
- 移除了不必要的 PHP 配置，避免了可能的误导和干扰。
静态资源缓存：
- 为静态文件设置缓存，有助于提高加载速度，但不会影响路由功能。