Skip to content
Latchkey

vue-cli-service build: Vue CLI Production

vue-cli-service build compiles a Vue CLI project for production, minified and hashed, into dist/.

Vue CLI (the webpack-based toolchain) exposes builds through vue-cli-service. It is still common in older apps that have not migrated to Vite.

What it does

vue-cli-service build runs the underlying webpack production build defined by Vue CLI: it minifies, hashes, extracts CSS, and emits to dist/. --mode selects the env file (.env.production) and NODE_ENV.

Common usage

Terminal
vue-cli-service build
vue-cli-service build --mode staging --dest build
# bundle size report
vue-cli-service build --report

Options

FlagWhat it does
--mode <m>Mode selecting the .env file (default production)
--dest <dir>Output directory (default dist)
--target <t>app (default), lib, or wc for web components
--reportGenerate a bundle analyzer report
--no-cleanDo not clear the output directory first

In CI

Only VUE_APP_ prefixed env vars are inlined, and the right ones load based on --mode; a missing prefix leaves the value undefined at build time. Large apps built through webpack here may need NODE_OPTIONS=--max-old-space-size=4096.

Common errors in CI

"Module not found: Error: Can't resolve \"X\"" is the usual case-sensitivity or missing-dependency issue on Linux runners. "JavaScript heap out of memory" needs a larger --max-old-space-size. An env var that works locally but is undefined in the built app is missing the VUE_APP_ prefix or the correct --mode file.

Related guides

Run this faster and cheaper on Latchkey managed runners. Start free →