Skip to content

前端单页应用 History 路由模式, 需要如何配置 nginx?

Posted on:2024年8月14日 at 23:36

前端单页应用使用 History 路由模式,需要将路由的控制交给前端,而不是后端处理,因此需要配置 nginx 让其将所有请求都指向 index.html 页面,让前端来处理路由。

具体配置可以参考以下 nginx 配置:

bashCopy codeserver {
    listen       80;
    server_name  example.com; # 域名或 IP 地址

    location / {
        root   /path/to/your/app; # 项目根目录
        index  index.html;
        try_files $uri $uri/ /index.html; # 将所有请求都指向 index.html 页面
    }
}

以上配置中,try_files 指令会尝试将请求映射到对应的文件,如果找不到,则会将请求转发到 /index.html 页面,由前端来处理路由。同时,root 指令需要指向前端应用的根目录。

原文转自:https://fe.ecool.fun/topic/360dfbe1-ae7c-4b59-8774-9a93be4bf01e