How to change vue-cli message after successfull compile (“App running at…”)?

Question

I use vue-cli in my dockerized project, where port mapping looks like this: "4180:8080", and the actual message after compiling my SPA looks like:

  App running at:
  - Local:   http://localhost:8080/app/ 

  It seems you are running Vue CLI inside a container.
  Access the dev server via http://localhost:<your container's external mapped port>/app/

App works fine, I could access at via http://localhost:4180/app/ as conceived, but I'm not able to find a proper way to change the message above to show this link instead of "It seems you are running Vue CLI inside a container...". I could use webpack hooks to insert link before the message but actually wanna find the way to change the message, generated by cli. Is it possible somehow?

Alex Mulchinock Alex Mulchinock · Accepted Answer · 2020-09-30T12:18:13

I came to this question - as I was looking to do the same thing with bash, running inside a Docker container (possibly what you're already doing).

You could achieve this by invoking Vue CLI commands through spawning a child node process, from within your Docker container (assuming your container is running node). You can then modify the output of stdout and stderr accordingly.

You can call a Javascript file in one of two ways:

use a shell script (bash, for example) to call node and run this script
set the entrypoint of your Dockerfile to use this script (assuming you're running node by default)

// index.js

const { spawn } = require('child_process')

const replacePort = string => {
  return string.replace(`<your container's external mapped port>`, 8000)
}

const vueCLI = (appLocation, args) => {
  return new Promise((resolve, reject) => {
    const vue = spawn('vue', args, {cwd: appLocation})

    vue.stdout.on('data', (data) => {
      console.log(replacePort(data.toString('utf8', 0, data.length)))
    })

    vue.stderr.on('data', (error) => {
      console.log(replacePort(error.toString('utf8', 0, error.length)))
    })

    vue.on('close', (exitCode) => {
      if (exitCode === 0) {
        resolve()
      } else {
        reject(new Error('Vue CLI exited with a non-zero exit code'))
      }
    })
  })
}

vueCLI('path/to/app', CLI_Options).then(() => resolve()).catch(error => console.error(error))

This approach does have drawbacks, not limited to:

performance being slower - due to this being less efficient
potential danger of memory leaks, subject to implementation
risk of zombies, should the parent process die

For the reasons above and several others, this is a route that was found to be unsuitable in my specific case.

How to change vue-cli message after successfull compile (“App running at…”)?

2 Answers