使用 vanilla JS 进行 SPA 配置 nginx 的正确方法是什么

Question

伙计们！我正在使用 vanilla javascript 做 SPA，并遇到了一个问题。因此，理想情况下，无论 URI 用户在浏览器 URL 框中输入什么内容，我都希望我的 nginx 服务器向我发送我的 index.html 文件。它可以工作，但是当浏览器获取index.html文件时，它显然会尝试获取html文件使用的其余文件，例如图像，css文件和js脚本，但它无法做到这一点，导致它如果 URI 是随机字符串则找不到它 xD

所以，我想知道应该如何“以正确的方式”修复它。

这是我的文件：

nginx.conf：

http {
    include mime.types;

    server {
        listen 8080;

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


events {}

index.html：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Transcendence</title>
</head>
<body>
    <nav class="nav">
        <a href="/" class="nav_link" data-link>Profile</a>
        <a href="/game" class="nav_link" data-link>Game</a>
        <a href="/chat" class="nav_link" data-link>Chat</a>
    </nav>
    <script defer type="module" src="src/js/index.js"></script>
</body>
</html>

Dockerfile

FROM nginx:1.24-bullseye

COPY nginx.conf /etc/nginx/nginx.conf

WORKDIR /app

COPY index.html .

COPY ./src ./src

目录树

Answer 1

您使用相对 URL 引用脚本。

<script defer type="module" src="src/js/index.js"></script>

这意味着，如果您不使用任何子路径（您用“随机字符串”提到）查询页面，它会尝试加载相对于它的

src/js/index.js

。例如，如果您请求

http://localhost:8080/some-path

，它会尝试从

index.js

加载

http://localhost:8080/some-path/src/js/index.js

，但会失败。您应该能够通过浏览器开发工具来验证这一点。正如您在

http://localhost:8080/

中观察到的那样，它有效，因为相对路径随后解析为实际可以找到它的

http://localhost:8080/src/js/index.js

。

主要有2种方法可以解决这个问题：

为静态资源使用绝对路径
```
/src/js/index.js
```
提供基本标签：
```
Definition and Usage
The <base> tag specifies the base URL and/or target for all relative URLs in a document.
```
将基本标签放入您的
```
head
```
的
```
index.html
```
:
```
<base href="/">
```
请注意，这也会影响所有相对链接、图像路径等，但通常这也是您想要的。

我个人建议使用第二种方法，这在大多数情况下是“正确的方法”。但是，有一些罕见的情况，它不适合，所以我还想提一下第一种方法。

使用 vanilla JS 进行 SPA 配置 nginx 的正确方法是什么

问题描述投票：0回答：1

1个回答

最新问题

使用 vanilla JS 进行 SPA 配置 nginx 的正确方法是什么

问题描述 投票：0回答：1

1个回答

最新问题

问题描述投票：0回答：1