I have some recommendations for anyone that is trying to serve basic html page files with javascript and is facing this 404 issue only in production and not locally. A good point to begin debugging is to take a look at what Vercel is receiving and exposing to your public domain.
In the Vercel dashboard: visit your project at projectID -> Source tab. From here, take a look at the tabs present on the left side titled Source & Output.
The files present in Output will be available publicly, you may see index & middleware already in there. Vercel will usually be able to locate your index.html from the .root and will automatically generate the middleware if one isn't present.
The Source tab is specifying the files that will be publicly available when accessing your domain. If the .html page you're trying to locate isn't in this Ouput tab that is probably the source of your problems. We'll need to ensure the .html page you're trying to contact exists in this Output directory.
How can we do this?
Ensure you have a /public folder in your project. Your index.html should be in the .root directory, along with dependency managers and lock files. By moving files over we're telling Vercel to make these available publicly, aka in the Output directory.
Ensure your directory assembles something like the following:
.root/
│
├── package.json
├── package-lock.json
├── index.html
├── vercel.json
├── public/
│ ├── styles.css
│ ├── images/
│ └── page1.html
Additional recommendations (cleaning the url):
{
"cleanUrls": true
}
Utilize a cleanUrls object in your vercel.json to clean the URL:
eg. https://your-website.com/about.html -> https://your-website.com/about