Deployment to static hosting in Vue - Practice Problems & Coding Challenges

Challenge - 5 Problems

❓ component_behavior

intermediate

What happens when you deploy a Vue app without configuring the base URL for static hosting?

You deploy a Vue 3 app to a static hosting service under a subfolder (e.g., https://example.com/myapp/) but forget to set the base option in vue.config.js. What will users most likely experience?

A Static assets like CSS and JS fail to load, causing a broken UI.

B The app loads correctly with all routes working as expected.

C The app redirects users to the root domain instead of the subfolder.

D The app shows a blank page with no errors in the console.

💡 Hint

Think about how URLs for assets are resolved when the base path is not set.

Without setting the publicPath URL, Vue assumes the app is served from the root. This causes asset URLs to be incorrect, so CSS and JS files fail to load, breaking the UI.

📝 Syntax

intermediate

Which vue.config.js snippet correctly sets the base URL for deploying to /app/ on static hosting?

Choose the correct syntax to configure Vue CLI to serve the app from the /app/ subfolder.

A module.exports = { baseUrl: '/app/' }

B module.exports = { publicPath: '/app/' }

C module.exports = { base: '/app/' }

D export default { publicPath: '/app/' }

💡 Hint

Check the official Vue CLI documentation for the correct option name.

The correct option to set the base URL in Vue CLI is publicPath. baseUrl and base are incorrect or deprecated.

🔧 Debug

advanced

Why does the Vue app show 404 errors on page refresh after deployment to static hosting?

You deployed a Vue app using history mode for routing on static hosting. When you refresh a page other than the root, you get a 404 error. Why?

A Vue Router is not installed properly in the project.

B The app's <code>publicPath</code> is set incorrectly causing asset loading errors.

C Static hosting does not support client-side routing with history mode by default.

D The app's main <code>index.html</code> file is missing from the deployment.

💡 Hint

Think about how static servers handle URLs and client-side routing.

Static servers serve files based on the URL path. With history mode, URLs look like real paths, but the server does not have those files, causing 404 errors on refresh.

🧠 Conceptual

advanced

What is the main advantage of using hash mode routing for Vue apps on static hosting?

Why might you choose hash mode routing instead of history mode when deploying a Vue app to static hosting?

A Hash mode routing improves SEO by creating clean URLs.

B Hash mode routing reduces the app bundle size significantly.

C Hash mode routing enables server-side rendering automatically.

D Hash mode routing allows the app to work without server-side configuration for route fallback.

💡 Hint

Consider how static servers handle URLs with hashes versus normal paths.

Hash mode uses the URL fragment (after #), which the server ignores, so no special server setup is needed to serve the app on any route.

❓ state_output

expert

What is the final URL in the browser after deploying a Vue app with publicPath: '/site/' and navigating to /site/dashboard using history mode?

You deployed a Vue app with publicPath set to /site/. The app uses Vue Router in history mode. You navigate inside the app to the dashboard page. What URL will the browser show?

A https://example.com/site/dashboard

B https://example.com/site/#/dashboard

C https://example.com/dashboard

D https://example.com/#/dashboard

💡 Hint

Remember how history mode routing works with base URLs.

With publicPath: '/site/' and history mode, the URL reflects the base path plus the route path without hashes.