Vue-cli: Allow silent/minimal/standard output when building

[kjleitz]

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.

[ashrafhadden]

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!

[ashrafhadden]

Alternative Solution

Similar to #1284.
@kjleitz The following will at least disable vue-cli-service's progress output until --silent and --verbose options can be properly implemented. I've also added a great replacement in the meantime, simple-progress-webpack-plugin, which does pretty much everything you requested.

// vue.config.js
// ...

module.exports = {
  chainWebpack: config => {
    // remove vue-cli-service's progress output
    config.plugins.delete('progress')
    // optionally replace with another progress output plugin
    // `npm i -D simple-progress-webpack-plugin` to use
    config.plugin('simple-progress-webpack-plugin').use(require.resolve('simple-progress-webpack-plugin'), [
      {
        format: 'minimal', // options are minimal, compact, expanded, verbose
      },
    ])
  }
}

For those interested in PR's...

Here's the current implementation defining the progress output, and here is where it's instantiated. It's just a customization of webpack's internal ProgressPlugin.

[kjleitz]

@ashrafhadden :+1: :+1: :+1: I'll definitely check out the plugin!

[vacri]

The 'build' action definitely needs a 'no progress bar' option - for a lot of CI systems, they just append all output text to log, and a progress bar is a _lot_ of output text as it is rewritten constantly. An append-only log doesn't care about the 'clear line' character used in dynamic status bars.

I've got some builds at the moment that have 1.2MB worth of buildlog... about 1.1MB of which is progress bar spam.

Just piping up with another use case...

[kjleitz]

bump! :)

[MKorostoff]

I was able to accomplish basically what this thread is asking for simply by passing the --silent flag at the command line, e.g.

vue-cli-service build --watch --silent

This has the advantage of still printing errors, but doesn't give me an ultra long list of all the file chunks that have been built.

[georgyfarniev]

Is there any updates about it?

[kjleitz]

@MKorostoff that didn't change anything for me on v3.11.0 (still has the animated/changed-in-place progress line). Regardless, though, a --silent option doesn't satisfy the issue—I still _do need_ success/informational output, just output that's not... broken.

[vpiskunov]

The verbose line logging now started happening for me in Vue-UI (of CLI) - didn't happen before - any way to fix?

Doesn't happen when running same command from terminal though.

[geekytime]

It took me some digging to figure it out, but there does seem to be a way to get this working with serve. I tried to explain the situation here: https://github.com/vuejs/vue-cli/issues/4557#issuecomment-545965828

[whme]

Please allow this for vue-cli-service test:unit 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 serve, build and test:unit would be awesome!

[denyo]

Adding this reduces the majority of logs.

// vue.config.js
module.exports = {
  devServer: {
    progress: false
  }
}

Also vue-cli-service build --silent works with "@vue/cli-service": "^4.4.1".

[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
  }
}

[jswinarton]

Just wanted to emphasize this aspect of the initial issue:

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.

So far I have been able to figure out how to silence the majority of the unnecessary logs, but this doesn't fully fix the issue. There appears to be no way to prevent the builder from clearing the terminal window after the build is complete. This is a pretty serious issue because it doesn't play nice with other dev tools. For example, we are running Vue in a Docker container within docker-compose, which aggregates logs from multiple services to a single terminal window in development. As it stands this clobbers the output from all the other services, which is not ideal.

[jasonkarns]

Double 👍 to @jswinarton 's comment about clearing the console... We are booting our dev processes with overmind, and vue is nuking the output from the other processes. "not ideal" is a huge understatement

I'd also like to stress the importance that whatever output-supression option ends up being chosen, it _must_ be something configurable on the command line (not necessarily in place of, but at least in addition to configuration file).

The desirability of the additional output is heavily influenced by what is spawning the dev server. Running it from a process manager like overmind? output is desired because overmind can segregate output per process. Running the dev server from, say, asp.net's dev server? output is definitely _not_ desired because it's interleaved with the rest of the application output.

Just keep that in mind, that merely having the ability to configure in json config is not sufficient to cover use cases.

[vegerot]

When trying to run vue-cli-service serve in docker-compose, it is very annoying having to see a few thousands lines of

app_1    | <s> [webpack.Progress] 88% hashing
app_1    | <s> [webpack.Progress] 88% after hashing
app_1    | <s> [webpack.Progress] 88% after hashing
app_1    | <s> [webpack.Progress] 88% after hashing HotModuleReplacementPlugin
app_1    | <s> [webpack.Progress] 88% after hashing HotModuleReplacementPlugin
app_1    | <s> [webpack.Progress] 89% record hash
app_1    | <s> [webpack.Progress] 89% record hash
app_1    | <s> [webpack.Progress] 89% module assets processing
app_1    | <s> [webpack.Progress] 89% module assets processing
app_1    | <s> [webpack.Progress] 90% chunk assets processing
app_1    | <s> [webpack.Progress] 90% chunk assets processing
app_1    | <s> [webpack.Progress] 90% additional chunk assets processing
app_1    | <s> [webpack.Progress] 90% additional chunk assets processing
app_1    | <s> [webpack.Progress] 90% additional chunk assets processing HotModuleReplacementPlugin
app_1    | <s> [webpack.Progress] 90% additional chunk assets processing HotModuleReplacementPlugin
app_1    | <s> [webpack.Progress] 91% recording
app_1    | <s> [webpack.Progress] 91% recording
app_1    | <s> [webpack.Progress] 91% recording HotModuleReplacementPlugin
app_1    | <s> [webpack.Progress] 91% recording HotModuleReplacementPlugin
app_1    | <s> [webpack.Progress] 92% additional asset processing
app_1    | <s> [webpack.Progress] 92% additional asset processing
app_1    | <s> [webpack.Progress] 92% chunk asset optimization
app_1    | <s> [webpack.Progress] 92% chunk asset optimization

Every time I start the frontend.

Please advise. I am wondering if it is possible to get the fancy auto-updating single-line output I get when running this outside of docker. That way I wouldn't need to turn off progress, but have the same experience I get when running it outside of docker