Deployment to static hosting in Vue - Cheat Sheet & Quick Revision

Recall & Review

beginner

What is static hosting in the context of web applications?

Static hosting means serving files like HTML, CSS, and JavaScript directly to users without running server-side code. It is simple and fast, ideal for Vue apps built into static files.

beginner

Which Vue CLI command prepares your app for static hosting?

The command npm run build or yarn build creates a dist folder with optimized static files ready for deployment.

intermediate

Why do you need to set the publicPath in vue.config.js when deploying to static hosting?

Setting publicPath tells Vue where your app will be served from, so it can correctly link CSS, JS, and assets. For example, if hosted in a subfolder, you set publicPath: '/subfolder/'.

beginner

Name two popular static hosting services suitable for Vue apps.

Netlify and GitHub Pages are popular static hosting services. They easily serve Vue's built static files and often support continuous deployment from Git repositories.

intermediate

What is a common issue when deploying Vue apps with client-side routing to static hosts, and how can it be fixed?

Client-side routing can cause 404 errors on page refresh because static hosts look for files matching the URL. Fix this by configuring the host to fallback to index.html or use hash mode routing.

Which folder contains the static files after running npm run build in a Vue project?

A node_modules

B src

C public

D dist

The dist folder holds the optimized static files ready for deployment.

What does setting publicPath in vue.config.js affect?

A The port Vue runs on locally

B The version of Vue used

C Where Vue looks for assets and files when deployed

D The style of the app

publicPath sets the base URL for assets in the built app.

Which hosting service is NOT typically used for static Vue app hosting?

A Netlify

B Heroku

C GitHub Pages

D Vercel

Heroku is mainly for server-side apps, not static hosting.

How can you avoid 404 errors on page refresh with Vue Router in history mode on static hosts?

A Configure the host to fallback to index.html

B Use inline styles

C Disable JavaScript

D Use a different port

Fallback to index.html lets the Vue app handle routing client-side.

What command builds a Vue app for production deployment?

A npm run build

B npm start

C npm test

D npm install

npm run build creates the production-ready static files.

Explain the steps to deploy a Vue app to a static hosting service.

Think about building, configuring paths, uploading files, and routing setup.

Describe why client-side routing can cause problems on static hosts and how to solve it.

Consider how static hosts handle URLs and how Vue Router works.