Vue Packaging (Building)

When you've finished developing your Vue application and are ready to deploy it to a production server, you need to package (also known as build) the project. Packaging is a process that converts your source code (.vue files, TypeScript/JavaScript code, CSS, etc.) into a set of optimized, static HTML, CSS, and JavaScript files for efficient operation in browsers.

Why is Packaging Needed?

Code in the development environment is optimized for readability and maintainability, while code in the production environment is optimized for performance and browser compatibility. The packaging process mainly does the following:

1. Compilation: Compiles .vue single-file components, TypeScript, Sass/Less, and other syntaxes not directly supported by browsers into standard JavaScript and CSS.
2. Minification: Removes unnecessary characters from the code, such as spaces, newlines, and comments, to reduce file size.
3. Code Splitting: Splits application code into multiple small chunks (chunks), implementing on-demand loading to speed up the application's initial load time.
4. Tree-shaking: Removes code that's not used in the project, further reducing the size of the packaged files.
5. Static Resource Processing: Processes static resources such as images and fonts, possibly compressing them or performing base64 encoding.

How to Package Your Vue Project

Projects created with the official scaffolding create-vue have already preset the build command for you. You just need to run the following in the project root directory:

npm run build

This command will invoke the underlying build tool (typically Vite) to execute the packaging process.

Build Output

After packaging completes, you'll discover a newly generated dist folder (abbreviation for "distribution") in the project root directory. This folder contains all the static artifacts of your application and can be directly deployed to any static file server.

The typical structure of the dist folder is as follows:

dist/
├── assets/
│   ├── index.xxxx.js       # Main JavaScript code
│   ├── index.xxxx.css      # Main CSS code
│   └── ...                 # Other split JS/CSS or static resources
├── favicon.ico
└── index.html              # The application's entry HTML file

• index.html is the single entry point of your single-page application. It has automatically linked to the packaged CSS and JS files.
• The assets directory stores all JavaScript, CSS, images, fonts, and other resources. The hash values in the filenames (like xxxx) are for cache control. When your code is updated, the filenames will change, and browsers will download the new files instead of using old caches.

Locally Previewing the Packaged Application

Before deployment, you might want to locally preview whether the packaged application works normally. Vite provides a convenient command:

npm run preview

This command will start a simple static file server with the dist folder as the root directory. You can open the address seen in the terminal in your browser to check your production version of the application.