如何解决已部署的react-vite应用程序中的404错误？

Question

我有一个用 vite 构建的生产就绪的 React 应用程序。我已经运行了构建过程，并将

dist

文件的内容上传到了它应该位于的子目录中。当我访问该 URL 时，它会在控制台中抛出 404 错误。

 Failed to load resource: the server responded with a status of 404 (Not Found) - index-77febc61.js:1

我的index.js 文件。我已经检查了 index.html 文件以确保 src 标记指向正确的 js 文件，看起来没问题。

该网站的 URL 应为

https://mydomainname.com/susbcriber

。所有文件都上传到

subscriber

目录中，但访问该网站时会显示带有 404 错误的白屏。

非常感谢任何有关如何解决此问题的帮助。

Answer 1

要解决已部署的 React-Vite 应用程序中的 404 错误，您应该检查以下区域：

1. 基本 URL 配置：确保您在 vite.config.js 文件中为 Vite 应用设置了正确的基本 URL。在您的情况下，基本 URL 应设置为“/subscriber”。配置方法如下：

// vite.config.js

export default {
  base: '/subscriber/',
}

2. 再次构建：如果您对配置或代码进行了更改，最好在部署应用程序之前重新构建应用程序，以确保最新的更改包含在构建中。

npm run build

3. 部署目录结构：确保dist目录中的所有内容都正确上传到服务器上的/subscriber目录中。仔细检查文件名和路径，确保它们与 dist 目录中的结构匹配。

4. 服务器配置：如果您使用服务器（例如 Nginx 或 Apache）来为您的 React-Vite 应用程序提供服务，请确保其配置正确以处理基本 URL。对于 Nginx，您的配置可能如下所示：

location /subscriber {
  alias /path/to/your/app/dist;
  try_files $uri $uri/ /subscriber/index.html;
}

此配置告诉 Nginx 当 URL 以 /subscriber 开头时从 dist 目录提供文件。它还将所有请求路由到index.html，以确保客户端路由正常工作。

此配置告诉 Nginx 当 URL 以 /subscriber 开头时从 dist 目录提供文件。它还将所有请求路由到index.html，以确保客户端路由正常工作。

5. 哈希文件名：如果您使用哈希文件名（例如，index-77febc61.js），请确保 index.html 文件中的名称与 dist 目录中的实际文件名匹配。哈希值可能会随着每次构建而变化，因此保持它们同步很重要。