Vue.js Deployment

Deployment puts your finished Vue application on a public server so anyone can open it. A development server on your own computer serves code for testing and does not suit real visitors. A production build compresses the code, removes development warnings, and produces a folder of static files that any web host can serve.

Think of moving a product from a workshop to a shop window. The workshop holds tools, scraps, and unfinished pieces. The shop window shows only the polished result. The build step prepares that polished result.

Create a Production Build

Run the build command in the project folder.

npm run build

Vite writes the output into a folder named dist. The folder contains one HTML file and a set of JavaScript, CSS, and image files.

Diagram: Build Output

Source project                 dist folder
  src/*.vue                      index.html
  src/*.js         --build-->     assets/index-a1b2c3.js
  src/*.css                      assets/index-d4e5f6.css
  public/                        favicon.ico

File names include a short hash such as a1b2c3. The hash changes whenever the content changes, which lets browsers cache files safely for a long time.

Preview the Build Locally

Test the production files before uploading them.

npm run preview

The command starts a local server on the dist folder. Click through every page, because a build can behave differently from the development server.

Environment Variables

Settings such as an API address change between development and production. Vite reads them from .env files. Only names starting with VITE_ reach browser code.

# .env.development
VITE_API_URL=http://localhost:3000

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

const apiUrl = import.meta.env.VITE_API_URL;

Never place passwords or secret keys in these files. Anything in browser code is visible to every visitor.

Diagram: Variable Selection

npm run dev    --> reads .env.development  --> localhost API
npm run build  --> reads .env.production   --> live API

Choose a Hosting Option

• Static hosting services such as Netlify, Vercel, Cloudflare Pages, and GitHub Pages accept the dist folder or build it from a repository on every push.
• A traditional web server such as Nginx or Apache serves the files from a folder you control.
• A cloud storage bucket with a content delivery network suits high traffic.

Fix Page Refresh Errors in Single-Page Apps

Vue Router with createWebHistory uses clean addresses like /about. A refresh on that address asks the server for a file named about, which does not exist, and the server returns a 404 error. The server must send index.html for unknown paths and let Vue Router take over.

# Nginx
location / {
  try_files $uri $uri/ /index.html;
}

# Apache (.htaccess)
RewriteEngine On
RewriteBase /
RewriteRule ^index\.html$ - [L]
RewriteCond %{REQUEST_FILENAME} !-f
RewriteCond %{REQUEST_FILENAME} !-d
RewriteRule . /index.html [L]

Diagram: Fallback Rule

Visitor refreshes /about
   |
Server: no file named "about"
   |
Fallback rule --> send index.html
   |
Vue Router reads /about --> shows the About page

Deploy to a Subfolder

A site hosted at example.com/shop/ needs a base path so asset links point to the right place.

// vite.config.js
export default defineConfig({
  base: "/shop/"
});

// router
createRouter({ history: createWebHistory("/shop/"), routes });

Pre-Launch Checklist

• Serve the site over HTTPS.
• Set long cache times for hashed files and short cache times for index.html.
• Enable gzip or Brotli compression on the server.
• Add a custom 404 page through a catch-all route.
• Check the site on a phone and a slow connection.
• Remove console.log calls that expose internal details.

Automate with Continuous Deployment

Connect a repository to a hosting service. Every push to the main branch triggers a fresh build and upload. Add the test command to that pipeline so failing tests block a release.

Diagram: Automated Pipeline

Push code --> run tests --> npm run build --> upload dist --> live site

Summary

Deployment turns source code into a static dist folder through npm run build. Preview the result locally, set environment variables for production, pick a static host or server, and add a fallback rule so page refreshes work with Vue Router. A base path supports subfolders, a checklist covers security and speed, and automated pipelines publish every approved change.