Deploy your
Vue project
Upload the static output from Vue, Vite, Vue CLI, or Nuxt and publish it with history-mode fallback, HTTPS, edge delivery, and custom domains ready when you need them.
base: './',
Know which Vue folder to upload
Most Vue deployment problems start before hosting: the wrong output folder, the wrong base path, or a build that was not previewed locally.
Vite + Vue
Vite places the production build in dist by default. If your config changes build.outDir or base, upload the actual output folder and test asset URLs.
Vue CLI
Vue CLI static builds are usually deployed from dist. If the app is served from a subpath, publicPath needs to match that final URL structure.
Nuxt static output
Nuxt can produce static output, but server-rendered routes and server APIs need a runtime. Upload only the generated public static files for this flow.
What Vue Router history mode actually needs
Clean URLs are worth keeping
Hash routes work almost anywhere, but URLs with # fragments look like a workaround and are awkward for sharing, analytics, and product polish.
Vue Router history mode gives you clean paths like /about or /dashboard/settings. The tradeoff is that the host must know how to serve index.html for routes that are not real files.
How DeployPages handles history mode
When a request does not match a real static asset, DeployPages serves the root index.html and lets Vue Router resolve the final view in the browser.
- Direct visits to nested routes do not hard-fail immediately.
- The root document is returned as the fallback response.
- Vue mounts, reads the current URL, and renders the correct route.
Vue production checks
A Vue app can work in dev and still fail after upload. These checks catch the common failures before the link goes out.
Base path
For Vite, confirm base. For Vue CLI, confirm publicPath. Wrong values usually show up as missing CSS, JS, fonts, or images.
History fallback
Open a nested route directly and refresh it. If the page stays alive, the fallback is doing its job.
Static-only output
DeployPages serves static files. API routes, server middleware, and SSR-only behavior need a separate backend or runtime.
Local preview
Use a real local preview server for the production build. Opening dist/index.html with file:// can hide or create problems that do not match deployment.
Vue deployment workflow
Build static assets
Run the production build in Vite, Vue CLI, or Nuxt static mode so the app is emitted as files a browser can load directly.
Find the output folder
Most Vue and Vite projects output to dist. Nuxt static projects usually deploy .output/public or a generated dist directory depending on configuration.
Nuxt static builds usually upload .output/public or dist depending on your project configuration.
Upload and validate links
Upload the whole output folder and verify deep links, router navigation, and asset paths after the site is live.
Common Vue deployment problems
Refreshing a nested route returns 404
Vue Router is using history mode, but the host is looking for a real file. Use an SPA fallback so unknown document routes return index.html.
CSS or JS files return 404
Check Vite base or Vue CLI publicPath. Also confirm you uploaded the full dist folder, including generated assets.
The app works with hash mode but not history mode
Hash mode keeps routing after # in the browser. History mode uses clean URLs and needs server fallback behavior for direct visits.
Nuxt output is missing server behavior
Static Nuxt output can be hosted as files. Nuxt server routes, server middleware, and SSR-only behavior require a server runtime.
Vue deployment FAQ
Why are my CSS and JS files returning 404?
This usually means asset paths were built for a different base URL, or the assets directory was not uploaded. In Vite, review base. In Vue CLI, review publicPath.
Does this support Nuxt?
Yes for static output. Generate the static site first, then upload the generated public folder. DeployPages is not the right target for Nuxt server rendering or server API routes.
Should I use hash mode or history mode?
Use history mode when you want clean URLs and your host supports fallback to index.html. Hash mode is simpler to host, but it leaves # in every client-side route.
Should I upload the Vue source project?
No. Upload the production output folder, usually dist. The source project contains development files and dependencies that are not meant to be served directly.
Will Pinia or Vuex state survive a refresh?
Not automatically. A browser refresh resets in-memory client state. Persist important state with localStorage or your preferred persistence plugin.
Can I roll back to a previous release?
Yes. DeployPages keeps deployment history so you can revert to a previous static build when needed.