vue3项目history路由模式部署上线405、刷新404问题(包括部分页面刷新404问题)

一、找不到js模块

解决方法：配置Nginx配置文件：

// root /your/program/path/dist
root /www/wwwroot/my_manage_backend_v1/dist;

二、刷新页面导致404问题(Not found)

经过一系列配置后发现进入页面一切正常，包括路由前进和回退，但是一刷新页面就会出现404 页面丢失问题：

解决方法：配置Nginx配置文件：

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

三、405问题（Not allowed）

部署后发现能够进入登录页面即index.html页面，但每次点击登录就报错405问题：

要是你前端和后端确保没有配置错误，这个问题一般就是Nginx配置文件有问题，产生这种问题的前提是你采用上面两个方法解决了上面两个问题，由于一开始你的接口请求跨域配置也放在了“ location /”里面，如下：

# HTTP反向代理相关配置开始 >>>location ~ /purge(/.*) {proxy_cache_purge cache_one $host$request_uri$is_args$args;}location / {root /www/wwwroot/my_manage_backend_v1/dist;try_files $uri $uri/ /index.html;proxy_pass http://127.0.0.1:3007;proxy_set_header Host $host:$server_port;proxy_set_header X-Real-IP $remote_addr;proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;proxy_set_header REMOTE-HOST $remote_addr;add_header X-Cache $upstream_cache_status;proxy_set_header X-Host $host:$server_port;proxy_set_header X-Scheme $scheme;proxy_set_header X-Forwarded-Method $request_method; # 确保请求方法被代理proxy_connect_timeout 30s;proxy_read_timeout 86400s;proxy_send_timeout 30s;proxy_http_version 1.1;proxy_set_header Upgrade $http_upgrade;proxy_set_header Connection "upgrade";}# HTTP反向代理相关配置结束 <<<

这样就导致当你想请求动态接口js资源时，你会发现js可能会执行成功，但页面没有跳转，url地址也没变，还有的接口会报错405，这是因为上面仅仅配置了 ‘location /’，导致所有进来的http请求都去try_files了，**并没有正确的代理到后端服务，**因此出现上述问题。解决方法如下：

    # 前端路由代理配置（因为采用了history路由模式）静态资源location / {root /www/wwwroot/my_manage_backend_v1/dist;try_files $uri $uri/ /index.html;}# 后端接口代理配置location /api {proxy_pass http://127.0.0.1:3007;proxy_set_header Host $host;proxy_set_header X-Real-IP $remote_addr;proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;}location /user {proxy_pass http://127.0.0.1:3007;proxy_set_header Host $host;proxy_set_header X-Real-IP $remote_addr;proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;}location /setting {proxy_pass http://127.0.0.1:3007;proxy_set_header Host $host;proxy_set_header X-Real-IP $remote_addr;proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;}// ...

将静态页面index.html放在“/”根目录下，如果前端发起请求时没有更准确的路径与之匹配，就采用这个文件匹配；

此外，后端接口也就是各个路由模块也需要配置对应的路径，以至于将它们代理到服务器上，进行相应，注意：每个路由模块都要挂载，一般在app.js里面，可以看看有哪些路由模块。

四、最后总结一下

上面这种配置在前端路由和后端接口前缀一致时，也会产生404问题（页面展示 not get/post），因为当你获取某个页面路由时比如/setting，由于Nginx里面配置了代理服务 location /setting， 这会代理到到接口请求，当然就不能获取页面资源了。解决这个问题的根本方法：

后端里面：每个路由模块都加一个统一的前缀，比如 ‘/api’；

前端里面：在封装axios时，里面的baseURL: `${import.meta.env.VITE_API_BASEURL}/api` ，做一个拼接就好了，这样可以不用一个个在每个接口请求的前面加 /api了（毕竟开发环境时，好多人不加api）。

Nginx配置：上面处理完之后，就等于所有后端接口都在 /api下面了，前端直接 / 这个路径获取，后端只需要一个代理 location /api 就好了，如下配置：

    # 前端路由代理配置（因为采用了history路由模式）静态资源location / {root /www/wwwroot/my_manage_backend_v1/dist;try_files $uri $uri/ /index.html;}# 后端接口代理配置location /api {proxy_pass http://127.0.0.1:3007;proxy_set_header Host $host;proxy_set_header X-Real-IP $remote_addr;proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;}

至此，完全解决~