vue-build
Build Vue.js application for production
TLDR
Build a .js or .vue file in production mode with zero config
SYNOPSIS
vue-build [options]
(Note: This command is typically an alias or script wrapper for vue-cli-service build within a Vue CLI project.)
PARAMETERS
--mode
Specifies the environment mode for the build process, such as 'production' (default) or 'development'.
--dest
Defines the output directory for the compiled production files. The default is 'dist'.
--report
Generates an interactive bundle analyzer report, providing insights into the size of various modules in your build.
--report-json
Generates the bundle analyzer report in JSON format instead of an interactive HTML page.
--watch
Monitors source files for changes and automatically rebuilds the application. Useful for continuous integration or specific development workflows.
--target
Determines the type of build target: 'app' (default) for a single-page application, 'lib' for a library, or 'wc'/'wc-async' for web components.
--name
Specifies the name for the library or web component when building with '--target lib' or '--target wc'.
--filename
Sets the output filename for the generated library or web component bundle.
--no-clean
Prevents the build command from cleaning (deleting contents of) the destination directory before generating new files.
--modern
Builds two versions of the application: one for modern browsers leveraging ES modules and one for legacy browsers using older JavaScript syntax, allowing optimal performance across different environments.
DESCRIPTION
The command vue-build typically refers to the process of compiling a Vue.js application into optimized, static files suitable for production deployment. While not a standalone Linux command in itself, it is most commonly executed as part of an `npm run build` or `yarn build` script within a Vue CLI project, which then invokes `vue-cli-service build`. This underlying process utilizes tools like Webpack to bundle, minify, and optimize all Vue components, JavaScript, CSS, and other assets. Its primary goal is to generate a highly efficient and performant version of the application, often placed in a `dist` directory, ready to be served by any static web server. This includes optimizations such as code splitting, tree-shaking, and asset versioning to ensure minimal file sizes and faster load times.
CAVEATS
Not a standalone executable: vue-build is not a native Linux command but typically an alias or script (e.g., `npm run build`) defined within a Vue CLI project's `package.json`, which then executes `vue-cli-service build`. It requires Node.js and a properly set up Vue CLI project.
Requires a Web Server for Deployment: The output of `vue-build` is a set of static HTML, CSS, and JavaScript files. These files must be served by a web server (e.g., Nginx, Apache, or a simple `serve` utility) to be accessible and functional in a browser.
Configuration Complexity: While command-line options provide basic control, advanced build configurations (e.g., Webpack loaders, plugins, aliases) are typically managed through a `vue.config.js` file at the project root, rather than entirely through command-line arguments.
CUSTOM CONFIGURATION
Beyond command-line options, the `vue-build` process (specifically `vue-cli-service build`) can be extensively customized via a `vue.config.js` file. This file, located at the root of your project, allows you to modify the underlying Webpack configuration, define proxy settings, adjust asset paths, and integrate custom plugins, providing deep control over the build output without 'ejecting' the Vue CLI's default configurations.
DEPLOYMENT CONSIDERATIONS
When deploying a built Vue single-page application (SPA), it's crucial to configure your web server to handle client-side routing. This typically involves setting up a 'fallback' rule that redirects all unknown paths back to your `index.html` file. This ensures that direct access to routes (e.g., `yourdomain.com/about`) or browser refreshes on internal routes do not result in 404 errors, as the server always serves the SPA's entry point, allowing Vue Router to manage the client-side navigation.
HISTORY
The build process for Vue applications has significantly evolved with the Vue CLI. Initially, developers often managed Webpack configurations manually. With the release of `@vue/cli` (version 3 and above), the `vue-cli-service` command was introduced as a core dependency within Vue projects. This shift abstracted away complex Webpack setups, providing a standardized, project-local command-line interface for tasks like building, serving, and testing. The common `npm run build` script emerged as the standard way to invoke `vue-cli-service build`, simplifying the development workflow and promoting consistency across Vue projects.
