我的 HTML5 和 CSS 项目出现 Vercel 部署错误 404

Question

我的 vercel 有问题。我已经尝试了一切。

我多次尝试使用 Express 部署我的节点应用程序，但没有任何效果，我总是得到：

”404：NOT_FOUND 代码：NOT_FOUND“

这是我的index.js：

const exp = require('constants');
const express = require('express');
const res = require('express/lib/response');
const app = express();
const path = require('path');

//express server port

app.listen(process.env.PORT || 3000, () =>{
 console.log("Server status: Online.")
});

app.get("/", (req, res) => {
    res.sendFile(path.join(__dirname, "/views/index.html"));
});

app.get("/register", (req, res) => {
    res.sendFile(path.join(__dirname, "/views/register.html"));
});

app.get("/login", (req, res) => {
    res.sendFile(path.join(__dirname, "/views/login.html"));
});

app.use(express.static("public"));

和我的 vercel.json：

{
    "version": 2,
    "builds": [
        {
            "src": "./app.js",
            "use": "@vercel/node"
        }
    ],

    "routes": [
        {
            "src": "/(.*)",
            "dest": "/"
        }
    ]
}

我尝试删除node_modules，将“app.js”更改为“index.js”，几乎所有内容，但没有任何效果。

Answer 1

您可以将index.js更改为app.js

Answer 2

问题

对于任何尝试使用 javascript 提供基本 html 页面文件并且仅在生产中而非本地遇到此 404 问题的人，我有一些建议。开始调试的一个好点是查看 Vercel 正在接收并向公共域公开的内容。

配置

在 Vercel 仪表板中：通过

projectID -> Source tab

访问您的项目。从这里，查看左侧标题为

Source

和

Output

的选项卡。

Output

中的文件将公开提供，您可能会看到索引和中间件已经在其中。 Vercel 通常能够从 .root 中找到您的 index.html，并且如果中间件不存在，则会自动生成中间件。

Source

选项卡指定访问您的域时将公开可用的文件。如果您尝试查找的 .html 页面不在这个

Ouput

选项卡中，则可能是问题的根源。我们需要确保您尝试联系的 .html 页面存在于此

Output

目录中。

解决方案

我们怎样才能做到这一点？

确保您的项目中有一个

/public

文件夹。您的index.html 应位于.root 目录中，以及依赖项管理器和锁定文件。通过移动文件，我们告诉 Vercel 将这些文件公开，即在

Output

目录中。

确保您的目录汇编如下所示：

目录结构

.root/
│
├── package.json
├── package-lock.json
├── index.html
├── vercel.json
├── public/
│   ├── styles.css
│   ├── images/
│   └── page1.html
  

其他建议（清理网址）：

vercel.json

{
  "cleanUrls": true
}

利用 vercel.json 中的

cleanUrls

对象来清理 URL：

例如。

https://your-website.com/about.html

->

https://your-website.com/about