Throughout development, you have been using npm run dev to start a local testing server.
This development server is optimized for fast refreshing and debugging, but it is highly unoptimized for real-world traffic.
When you are finally ready to launch your website to the public, you must "Build" your application.
Building is the process where Vite (Vue's build tool) gathers all your .vue files, JavaScript, and CSS.
It compiles them down into plain, highly minified vanilla HTML, JS, and CSS files that any browser can quickly understand.
To trigger this process, run the following command in your terminal:
npm run build
After running the build command, Vite will generate a new folder in your project named dist (short for distribution).
This folder contains the final, minified assets required to run your application.
You should never directly edit the files inside the dist folder!
If you need to make changes to your website, update your src code and run npm run build again to overwrite the old dist folder.
Once you have your dist folder, deploying a Vue Single Page Application (SPA) is incredibly simple.
Because the final build is completely static, you do not need a complex Node.js or Python backend server to host it.
You can simply drag and drop the contents of the dist folder into any static file host!
There are numerous free and premium platforms perfectly designed to host static Vue apps:
// 1. Finish writing your Vue code // 2. Compile for production npm run build// 3. Take the 'dist' folder and upload it to Netlify or Vercel // 4. Your website is live globally!
When preparing to launch your app to the public, which folder contains the final, minified files ready for deployment?
Do you need to rent a complex backend Node.js server to host the final production build of a standard Vue SPA?