Deployment to static hosting in Vue

Introduction

Deployment to static hosting means putting your Vue app online where anyone can visit it. It makes your app available without needing a server to run code.

You want to share your Vue website with friends or users.

You have a simple app that does not need a backend server.

You want fast loading pages from a simple hosting service.

You want to publish a portfolio or blog built with Vue.

You want to test your app on the internet before adding backend features.

Syntax

Vue

npm run build
# Then upload the contents of the 'dist' folder to your static host

The 'npm run build' command creates optimized files for production.

The 'dist' folder contains all files needed to serve your app.

Examples

Build your Vue app and deploy the 'dist' folder to popular static hosts like Netlify or Vercel.

Vue

npm run build
# Upload 'dist' folder to Netlify or Vercel

Use GitHub Pages by pushing the 'dist' files to a special branch for hosting.

Vue

npm run build
# Copy 'dist' folder contents to GitHub Pages branch

Firebase Hosting can serve your Vue app by uploading the build folder with their tools.

Vue

npm run build
# Upload 'dist' folder to Firebase Hosting using Firebase CLI

Sample Program

This simple Vue component shows a welcome message. After building with npm run build, you upload the dist folder to your static host.

Vue

<template>
  <main>
    <h1>Welcome to My Vue App</h1>
    <p>This app is ready for static hosting!</p>
  </main>
</template>

<script setup>
// No special code needed for deployment
</script>

<style scoped>
main {
  font-family: Arial, sans-serif;
  padding: 2rem;
  text-align: center;
}
</style>

Important Notes

Make sure your vue.config.js has the correct publicPath if your app is not at the root URL.

Static hosts only serve files; dynamic server code won't run here.

Use browser DevTools to check network and console for errors after deployment.

Summary

Build your Vue app with npm run build to prepare files for static hosting.

Upload the dist folder contents to a static hosting service like Netlify, GitHub Pages, or Firebase Hosting.

Static hosting is great for fast, simple Vue apps without backend needs.