Building and Deploying a Vue App

You have built components, wired up routing, and centralized state with Pinia. The last step is getting your application in front of real users. In this lesson you'll learn what a production build actually does, how to configure it, and how to deploy the result to popular hosts like Netlify, Vercel, and GitHub Pages, including the one server tweak every SPA needs.

What the Production Build Does

During development, Vite serves your source files with instant hot reload. That is great for you but wasteful for visitors. A production build transforms the project into a small set of optimized static files:

JavaScript and CSS are minified and split into chunks.
Dead code is removed through tree shaking.
Assets get hashed filenames like index-a1b2c3.js so browsers can cache them forever.

Run the build with:

bash

npm run build

The output lands in a dist/ folder. You can inspect it locally before deploying:

bash

npm run preview

This serves dist/ on a local port so you can verify the production bundle behaves exactly like the dev version.

Environment Variables

Hardcoding API URLs is a common beginner mistake. Vite exposes variables that start with VITE_ to your client code:

bash

# .env.production
VITE_API_URL=https://api.example.com

const api = import.meta.env.VITE_API_URL
const res = await fetch(api + '/products')

Never put secrets like private API keys in these variables. Everything shipped to the browser is public; secrets belong on a backend server.

The History Mode Gotcha

If you use createWebHistory from the routing lesson, a visitor who refreshes on /users/42 asks the server for a file called /users/42, which does not exist. The fix is a rewrite rule that serves index.html for every path and lets Vue Router take over. On Netlify, create a _redirects file in your public/ folder:

text

/*  /index.html  200

Vercel and most other hosts have an equivalent rewrite setting; on your own Nginx server use try_files $uri $uri/ /index.html;.

Deploying to Netlify or Vercel

Both platforms follow the same flow:

Push your project to a GitHub repository.
Import the repository in the Netlify or Vercel dashboard.
Set the build command to npm run build and the output directory to dist.
Add your production environment variables in the dashboard.

From then on, every push to your main branch triggers a fresh build and deploy automatically. Pull requests even get their own preview URLs, which makes reviewing changes with teammates painless.

Deploying to GitHub Pages

GitHub Pages serves your site from a subpath like https://user.github.io/my-app/, so Vite needs to know the base path:

// vite.config.js
import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'

export default defineConfig({
  plugins: [vue()],
  base: '/my-app/'
})

Then build and publish the dist/ folder to the gh-pages branch, either manually or with a GitHub Actions workflow that runs on every push.

A Pre-Launch Checklist

Run npm run build locally and fix any warnings.
Check bundle size; lazy load heavy routes with dynamic imports.
Set a real <title> and meta description in index.html.
Test the deployed site on a phone, not just your desktop.
Confirm deep links like /about survive a page refresh.

Key Takeaways

npm run build produces an optimized static dist/ folder; npm run preview tests it locally.
Use VITE_ environment variables for configuration and keep secrets on the server.
SPAs with history mode need a rewrite rule that serves index.html for all routes.
Netlify and Vercel deploy automatically from GitHub with build command npm run build and output dist.
GitHub Pages needs the base option in vite.config.js when hosted under a subpath.

Congratulations, you have completed the Vue.js course! A great next step is exploring server-side rendering with Nuxt, or revisiting any lesson in this series to solidify the fundamentals.