重新加载后反应 nginx 返回 404 - Javascript

这种情况通常出现在前端单页应用程序中。当你重新加载应用程序时，你可能会遇到由 Nginx 服务器返回的 404 错误。这是因为 Nginx 并不知道如何处理前端路由。

解决方法

1. 配置 Nginx

添加以下配置规则，将所有请求都指向指定的 HTML 文件，从而保持与前端路由链接。

server {
    listen 80;
    server_name domain.com;

    location / {
        root /path/to/your/app;
        try_files $uri /index.html;
    }
}

这段代码表明：如果使用者进入网页时路径为domain.com，则会将此页面渲染出来。如果用户想要访问 domain.com/about, domain.com/contact 等其他 routes 时，由于这些 routes 并不存在存在于文件系统中，于是 Nginx 将会将这些 requests 放到 index.html 中重新渲染。

2. 为你的 Vue Router 配置 base URL

在你的 main.js 文件中，为 Vue Router 配置 base URL。

import Vue from 'vue'
import VueRouter from 'vue-router'
import routes from './routes'

Vue.use(VueRouter)

const router = new VueRouter({
    mode: 'history',
    base: '/your-base-url/',
    routes
})

这段代码表示：将你的 Nginx 配置中的 try_files 指令值进行修改。就是你在 Nginx 配置之前已经进行配置的路由。将 Vue.js 手工配置的 base-url 设置成相同的值，在这种情况下是 your-base-url.

3. 确定正确的文件路径

在 location / 指令中，root 指令指向了你的应用程序的根目录。确保此值正确。

4. 重启 Nginx 服务器

配置更改后，重启 Nginx 服务器。

sudo systemctl restart nginx

结论

重新加载后反应 nginx 返回 404 - Javascript 的解决方法相对简单，只需要在 Nginx 配置文件中进行简单的配置即可。希望这篇文章可以帮助您解决问题。