Host a Vue website

A client-rendered Vue app can be hosted as static files. Server rendering, server components and API handlers require the runtime used by your framework.

Steps

1. Inspect the project’s build and deployment instructions. Confirm whether the output is static or needs a persistent server.
2. For a Vite-based static project with a lockfile, build locally or in CI using the commands below. Other build tools may use different commands and output directories.
3. Set the production API URL and base path before building. Browser environment variables become public in the bundle; never put secrets there.
4. Upload the contents of the generated output folder to the domain’s document root. For a typical Vite project this is dist, not the source project or dependency folder.
5. If using history-based routing, configure the web server to return the entry HTML for application routes while preserving real files and API routes. Ask support for the correct rule for your web server; an Apache rule does not configure Nginx.
6. Enable HTTPS and test direct navigation to a nested route, refresh, missing assets and API requests. Use a VPS for server-only deployment modes.

Typical Vite build

npm ci
npm run build

If something goes wrong

A blank page often means the asset base path is wrong or an API request failed. A nested-route 404 needs the correct server fallback. Never use the development or preview server as a production hosting service.

Related articles

• Choose a hosting environment
• Server-rendered applications
• Optimize Vue

Last reviewed

2026-10-28