Running and building a Vue app - Practice Problems & Coding Challenges

Challenge - 5 Problems

❓ component_behavior

intermediate

What happens when you run npm run serve in a Vue 3 app?

You have a Vue 3 project created with Vite. You run npm run serve. What is the expected behavior?

A Starts a local development server with hot module replacement for live updates.

B Builds the app into static files for production deployment.

C Runs unit tests defined in the project.

D Installs project dependencies before starting the app.

💡 Hint

Think about what a development server does compared to building for production.

npm run serve starts a local dev server that updates the app live as you change code. Building for production uses npm run build.

📝 Syntax

intermediate

Which command correctly builds a Vue 3 app for production using Vite?

You want to create optimized static files for deployment from your Vue 3 project using Vite. Which command do you run?

A npm run start

B npm run serve

C npm run build

D npm run dev

💡 Hint

Building means preparing files for production, not running a server.

npm run build runs Vite's build process to create optimized static files. npm run serve runs a dev server.

🔧 Debug

advanced

Why does npm run serve fail with 'command not found' in a Vue 3 project?

You cloned a Vue 3 project and ran npm run serve, but get command not found. What is the most likely cause?

A You need to run <code>vue serve</code> instead of <code>npm run serve</code>.

B The <code>serve</code> script is missing in <code>package.json</code> scripts section.

C You forgot to install dependencies with <code>npm install</code>.

D The Node.js version is too old to run Vue commands.

💡 Hint

Check the package.json file for scripts.

If serve is not defined in package.json scripts, npm run serve will fail. You must add it or use the correct script name.

❓ state_output

advanced

What is the output folder after running npm run build in a Vue 3 Vite project?

After running npm run build in a Vue 3 project using Vite, which folder contains the production-ready files?

A src

B build

C public

D dist

💡 Hint

Look for the default output folder Vite uses.

Vite outputs production files to the dist folder by default after building.

🧠 Conceptual

expert

Why is it important to use npm run build before deploying a Vue 3 app?

Explain why running npm run build is necessary before deploying a Vue 3 app to a web server.

A It compiles and optimizes the app into static files that load faster and work without a dev server.

B It installs all dependencies needed for the app to run on the server.

C It starts a local server so you can test the app before deployment.

D It converts Vue files into plain HTML files without JavaScript.

💡 Hint

Think about what production-ready files need to be like.

npm run build creates optimized static files that browsers can load directly. This is essential for fast, reliable deployment without needing a development environment.