Question

我正在尝试在 Netlify 上部署 react 应用程序的构建文件夹。上传过程没有显示错误，网站上线，但观察到空白页面。

来自构建文件夹的我的 json 文件：

{
  "short_name": "React App",
  "name": "Create React App Sample",
  "icons": [{
      "src": "favicon.ico",
      "sizes": "64x64 32x32 24x24 16x16",
      "type": "image/x-icon"
    },
    {
      "src": "logo192.png",
      "type": "image/png",
      "sizes": "192x192"
    },
    {
      "src": "logo512.png",
      "type": "image/png",
      "sizes": "512x512"
    }
  ],
  "start_url": ".",
  "display": "standalone",
  "theme_color": "#000000",
  "background_color": "#ffffff"
}

link to app

Answer 1

检查您包含的 site 后，控制台中显示了相当多的错误。

加载资源失败：服务器响应状态为 404 ()
清单：行：1，列：1，语法错误。

您的 manifest.json 文件似乎有语法错误，因此这是一个不错的起点。接下来，几乎所有的构建文件都无法被页面加载。这让我认为 Netlify 能够部署您的站点，但构建文件夹中的静态资产不可用，因此所有构建文件块（如 main.e8a3c755.chunk.js）的“无法加载资源”错误。

创建 Netlify 配置文件

netlify.toml 是一个配置文件，用于指定 Netlify 如何构建和部署您的站点。要开始使用它，只需在项目的根目录下创建一个名为 netlify.toml 的文件。此配置文件将为 Netlify 提供有关如何构建项目、如何处理重定向以及其他有用信息的信息。

[build]
  command = "npm run build"
  publish = "build-output"

 [[redirects]]
  from = "https://some-url.com"
  to = "https://some-other-url.com"

以上为 [build] 上下文和重定向规则定义了一些基本的构建配置。 command 设置指定默认构建命令。这应该是您在 package.json 中定义的构建命令。 publish 设置指定包含构建中可部署的静态资产的目录。因此，当前的 publish 设置将发布到位于绝对路径 root/build-output 的目录。

您还可以在 [[redirects]] 中定义一些重定向规则。这非常简单，from 设置是您希望重定向的 URL，而 to 也是您应该被重定向的位置。默认 HTTP 状态代码为 301，但您可以在 status 中提供 [[redirects]] 键以提供自定义状态代码。

最重要的是，没有看到您的项目代码或指向它的链接。当 Netlify 部署您的站点时，很难确定为什么您的构建文件没有被识别。它归结为您的构建命令的使用方式，例如它的运行方式 "build": do build stuff 以及 React 构建文件的输出位置。最后，确保创建一个 netlify.toml 文件，以向 Netlify 提供有关如何构建和部署您的网站的详细信息。这是 Netlify 如何推荐 Deploying a React app 的链接。

将构建文件夹部署到 Netlify 时获取空白页面

1 个答案:

创建 Netlify 配置文件