Question

我在dockerized项目中使用vue-cli，其中端口映射如下所示：“ 4180：8080”，并且在编译SPA之后的实际消息如下：

  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运行正常，我可以按照设想通过http://localhost:4180/app/进行访问，但是我无法找到正确的方法来更改上面的消息以显示此链接，而不是“似乎您正在运行Vue CLI放在一个容器里...”。我可以使用webpack挂钩在消息之前插入链接，但实际上想找到更改由cli生成的消息的方法。有可能吗？

Answer 1

我遇到了这个问题-当我想在Docker容器中运行bash时做同样的事情（可能是您已经在做的事情）。

您可以通过在Docker容器内（假设容器正在运行节点）通过生成子节点进程来调用Vue CLI命令来实现此目的。然后，您可以相应地修改stdout和stderr的输出。

您可以通过以下两种方式之一调用Javascript文件：

使用Shell脚本（例如bash）调用node并运行此脚本
设置Dockerfile的入口点以使用此脚本（假设默认情况下您正在运行节点）

// 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))

这种方法确实有弊端，不仅限于：

性能变慢-由于效率较低
内存泄漏的潜在危险，取决于实施情况
如果父进程死亡，则有僵尸危险

由于上述原因和其他一些原因，这是一条在我的具体情况下不合适的路线。

Answer 2

it's better to change the port Vue is listening on而不是更改消息。

。 npm运行服务---port 4180

这会自动将您的消息更新为新端口，并在将docker端口向前更新为新端口后，它将再次运行。

成功编译后如何更改vue-cli消息（“应用程序运行于...”）？

2 个答案: