vuejs / vitepress

Vite & Vue powered static site generator.
https://vitepress.dev
MIT License
12.89k stars 2.08k forks source link

Site auto loads 404.html after deployed to Vercel #3460

Closed dinhhoangbaochan closed 9 months ago

dinhhoangbaochan commented 9 months ago

Describe the bug

I installed Vitepress, built then ran it locally following the documentation of Vercel and everything seemed fine. But when I deployed it to my personal Vercel, my site keeps loading the 404.html. When I visit the Output of Vercel, I couldn't find any index.html and only 404.html.

Here is currently the blog of mine that I deployed to Vercel.

This is my current source on Vercel: image

This is my current output on Vercel: image

Reproduction

Not sure if this is the correct way to reproduce, but I'll list down the commands that I ran, from install command to deploy:

npm add -D vitepress
npx vitepress init ./
npm run docs:build
npm run docs:preview
vercel --prod

Expected behavior

Page should load index.html when visiting /.

System Info

System:
    OS: Windows 10 10.0.19043
    CPU: (4) x64 Intel(R) Pentium(R) CPU G4560 @ 3.50GHz
    Memory: 2.27 GB / 7.96 GB
  Binaries:
    Node: 20.0.0 - C:\Program Files\nodejs\node.EXE
    npm: 9.6.4 - C:\Program Files\nodejs\npm.CMD
  Browsers:
    Edge: Spartan (44.19041.1266.0), Chromium (120.0.2210.133)
    Internet Explorer: 11.0.19041.1566
  npmPackages:
    vitepress: ^1.0.0-rc.39 => 1.0.0-rc.39

Additional context

I use a fresh setup of Vitepress and deploy to a Vercel setting using Node v20.x (which as mentioned on Vercel that is still in Beta). However I did try Node v18.x on Vercel and the error is the same.

Validations

brc-dd commented 9 months ago

Adjust the settings. You initialized vitepress at cwd instead of docs. You need to adjust vercel output directory and build commands accordingly:

? In which directory is your code located? ./
Local settings detected in vercel.json:
Auto-detected Project Settings (VitePress):
- Build Command: vitepress build docs
- Development Command: vitepress dev docs --port $PORT
- Install Command: `yarn install`, `pnpm install`, `npm install`, or `bun install`
- Output Directory: docs/.vitepress/dist
? Want to modify these settings? [y/N] y
? Which settings would you like to overwrite (select multiple)? Build Command, Development Command, Output Directory
? What's your Build Command? npm run docs:build
? What's your Development Command? npm run docs:dev -- --port $PORT
? What's your Output Directory? .vitepress/dist