I noticed this too. Here's a similar issue, with a workaround: #3603 (comment)

Note in that vue.config.js snippet from @ashrafhadden it is missing the closing ] and ) characters toward the end. It should be:

// 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
      },
    ])
  }
}

@bseib Thanks for the catch! I updated my comment

Same issue here! just noticed it happening - only in vue ui, runs fine in terminal

This issue is making CI build status pretty useless for us.
Are there any flags to make the webpack progress go away?

UPDATE: Just delete the progress bar until this is fixed:

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

module.exports = {
  chainWebpack: config => {
    // remove vue-cli-service's progress output
    config.plugins.delete('progress')
  }
}

👆that actually removes the wall of progress bar output from CI

Using the "simple-progress-webpack-plugin" isn't much better.

This caused the dev server when used in conjunction with ASP.NET Core's SpaServices UseWebpackDevMiddleware to go from ~5 seconds for a fresh start build to several minutes.

Same issue here. Is it going to be fixed in the next major release only?

Introduced in this commit webpack/webpack#9225
The stderr of the child process does not have a columns property so it's set to Infinity, thus the problem.

Not yet sure how to fix it. Will investigate later.

I am on v4.0.5 and even config.plugins.delete('progress') won't work for me

@rayax86, I was able to get it working by adding the progress: false flag to a second devServer block outside of the configureWebpack block, like this:

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

The intention may have been to allow this flag on the configureWebpack.devServer block:

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

But that doesn't quite work because of this line: https://github.com/vuejs/vue-cli/blob/dev/packages/%40vue/cli-service/lib/commands/serve.js#L64

At that point in the code where the ProgressPlugin is being added, options refers to the entire vue.config.js object, so options.devServer doesn't point to the devServer block in configureWebpack.

In some ways, it does make sense to keep the progress: false flag outside of the configureWebpack block, since there is already a progress option on webpack-dev-server, but it is CLI-only. It may be confusing to overload it, here.

I'm not sure if this should be fixed as a bug, by checking options.configureWebpack.devServer.progress in serve.js, or if it just needs more robust documentation to explain the separate devServer block. 🤷‍♂

set devServer.progress=false works, `chainConfig.plugins.delete("progress") not work.

version: ~4.2.0

same issue here with "@vue/cli-service": "^4.4.6" but works fine by

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

thanks to @geekytime

I have this issue after i'm add a concurrently vue start:
"serve": "concurrently -k \"nodemon ./src/database/server.js\" \"vue-cli-service serve --open\"",

version: 4.5.6

Just in case there's any docker noobs like me here, trying to run vue-cli-service serve in a docker container. The problem was that I was not allocating a pseudo-tty. The output looks normal once I do

docker run -it --publish 8080:8080 myapp

webpack/webpack#16810 should fix this issue.