Build a Vue.js 3 Application Tutorial
In this Vue tutorial we learn how to build an application for deployment to a web server.
We cover the build process and how to test the app in a live server environment.
If you want to follow along with the examples, you will need to create an app generated by the Vue CLI .
How to build your Vue application
The Vue loader and other tools like Babel takes care of this process for us, all we have to do is run the build command.
tip If you’re working in VSCode, you can go to Terminal > New Terminal to open a terminal or command prompt with the project folder already selected.
npm run build
Depending on the size of your application, this may take some time. Once the compilation has finished, we’ll see the following output.
DONE Compiled successfully in 9121ms 12:45:51 File Size Gzipped dist\js\chunk-vendors.10e09d0f.js 89.61 KiB 33.45 KiB dist\js\app.7a7fa9a6.js 4.48 KiB 1.63 KiB dist\css\app.fb0c6e1c.css 0.33 KiB 0.23 KiB Images and other types of assets omitted. DONE Build complete. The dist directory is ready to be deployed. INFO Check out deployment instructions at https://cli.vuejs.org/guide/deployment.html
That’s all you need to build your application. However, if you want to preview the built app, you will need to follow some extra steps.
The /dist/ directory is meant to be served by an HTTP server so it won’t work if we try to open the file directly in the browser.
We need to launch the project in a server environment so open up the /dist/ folder as a project in your editor.
tip If you’re using Visual Studio Code, go to File > New Window and then File > Open Folder . From there you can navigate to the /dist/ directory and choose Select Folder .
Visual Studio Code Live Server
If you’re working with Visual Studio Code as your editor, you can install the Live Server extension .
To use it, simply right-click on the index.html file in the Explorer pane and select Open with Live Server .
If you’re using another editor that doesn’t have a Live Server type extension, you can use an npm package like Vercel's serve .
To install the package, execute the following command.
npm install -g serve
tip The -g flag means the package will be installed globally and be available to any project. You can omit the flag if you want to install the package for the current project only.
To run the app, execute the following command.
serve -s dist
tip The -s flag will serve in Single-Page Application mode to prevent potential 404 errors with routes.