Allow silent/minimal/standard output when building

What problem does this feature solve?

First: thank you guys so much for your time and effort on this project. It’s seriously a life-saver.

So, I’m not sure if this is a feature request or actually kind of a bug report… maybe a little of both. But I think whatever bug I’m experiencing would be made moot were this feature to exist.

I’m looking for an option for “minimal output” from vue-cli-service build [--watch] which does not have a progress status line which is neither animated nor changed in-place.

When running vue-cli-service build --watch, it does something funky with the standard output. First you see “building for development”, then a progress status line which changes in place:

 34% building 204/220 modules 16 active ...e_modules/core-js/modules/_string-at.js

…before finally logging the build output, something like:

 DONE  Compiled successfully in 10200ms1:42:48 PM

  File            Size                          Gzipped

  dist/blah.js    13645.43 KiB                  2565.83 KiB
  dist/app.js     980.16 KiB                    235.21 KiB

  Images and other types of assets omitted.

  DONE  Build complete. Watching for changes...

A similar thing happens when doing a plain, unwatched, vue-cli-service build.

If I try to redirect the output to a file and tail that file (e.g., yarn run vue-cli-service build > foo.log, tail -f foo.log), I still see the dynamically-replaced progress line appear in the terminal where I ran the build command, and in foo.log I see a logged line from the TypeScript type-checking service starting up, and then I see the build output appear appended to the file. When I make a change to a watched file (if I use build --watch), I see the progress line in the previous terminal appear and I see another build “DONE” output in the log file.

See the following gif for an example:

Also, if I use a process-management program (e.g., node-foreman) to start the vue-cli-service build --watch, it logs a line for every single time the progress line changes, which easily fills my terminal buffer in just a few seconds—thousands of lines of output… 10-11 lines to one “XX% building …” line. Even if the feature provided a way for each “1% building …”, “2% building …”, etc. line to be simply appended to standard output, that would be fine (for me). I can always filter the lines by piping to grep/sed/awk/whatever if I’m logging to a file or running the process with foreman. But currently there’s no way to do that.

See the following gif for an example:

So, if there were a way to simply log output “traditionally”, line-by-line to STDOUT, without the observed hijacking (not sure what’s going on), it would make it a heck of a lot easier to use vue-cli-service with other common development tools and basic utilities. I’m having a hard time setting up a simple local dev setup with vue-cli that reflects the workflow/practices of my team, so this feature would make our lives a lot smoother.

What does the proposed API look like?

I’m picturing something like:

vue-cli-service build --verbosity silent  # no output
vue-cli-service build --verbosity minimal # no progress, appends every line instead of modifying in-place
vue-cli-service build --verbosity log     # includes progress but appends every line instead of modifying in-place
vue-cli-service build --verbosity default # business as usual

But I’m sure there’s a better idea than that. Not quite sure how it should look.

[ashmichael]

Please allow this for vue-cli-service serve as well!

According to https://cli.vuejs.org/config/#devserver

All options for webpack-dev-server are supported.

But trying to set any output options like devServer.stats and devServer.noInfo via vue.config.js have no effect.

A simple --silent and --verbose option for both serve and build would be awesome!

[garcianavalon]

My use-case is using vue-cli-service serve in a monorepo setup with several other commands run with lerna --parallel.

I settled with this conf:

• suppressing the default output
• adding simple-progress-webpack-plugin to still have visibility on the progress (single line output)

// vue.config.js
const SimpleProgressWebpackPlugin = require('simple-progress-webpack-plugin')

module.exports = {
  configureWebpack: {
    plugins: [
      new SimpleProgressWebpackPlugin({
        format: 'minimal'
      })
    ]
  },
  devServer: {
    progress: false
  }
}