vue-cli-service serve 和 webpack-dev-server 之间的区别（在 docker 中）答案

【问题标题】：Difference between vue-cli-service serve and webpack-dev-server (in docker)vue-cli-service serve 和 webpack-dev-server 之间的区别（在 docker 中）
【发布时间】：2020-03-08 23:07:22
【问题描述】：

我有两个 vuejs 项目，一个使用vue-cli-service，另一个使用webpack-dev-server。我已经为两者构建了一个 docker 镜像。

项目 1 (package.json)

  "scripts": {
    "serve": "vue-cli-service serve",

我可以从相应的图像运行一个容器：

  docker run -it -p 8081:8080 -v ${PWD}:/app/ -v /app/node_modules --name project-one project-one-image

项目 2 (package.json)

  "scripts": {
    "dev": "webpack-dev-server --inline --progress --config build/webpack.dev.conf.js",

我可以从相应的图像运行一个容器：

  docker run -it -p 8081:8080 -e "HOST=0.0.0.0" -v ${PWD}:/app/ -v /app/node_modules --name project-two project-two-image

我花了一些时间才弄清楚我必须指定的 webpack 版本：-e "HOST=0.0.0.0" 用于 docker run 命令（或将其设置在 index.js 文件中）。但它在几个地方有所描述：

https://webpack.js.org/configuration/dev-server/#devserverhost

https://dev.to/azawakh/don-t-forget-to-give-host-0-0-0-0-to-the-startup-option-of-webpack-dev-server-using-docker-1483

Docker container running vue-cli Welcome Page on localhost: This site can’t be reached

但为什么 vue-cli-service serve 不需要它在某处硬编码以使用 0.0.0.0（它没有在我的源文件中的任何位置设置）？

【问题讨论】：

标签： docker vue.js webpack

【解决方案1】：

但是为什么 vue-cli-service serve 不需要这样做呢？在某处硬编码以使用 0.0.0.0 （它没有在我的任何地方设置源文件）？

因为 0.0.0.0 在 vue-cli-service 的情况下默认主机。

Usage: vue-cli-service serve [options] [entry]

Options:

  --open         open browser on server start
  --copy         copy url to clipboard on server start
  --mode         specify env mode (default: development)
  --host         specify host (default: 0.0.0.0)
  --port         specify port (default: 8080)
  --https        use https (default: false)
  --public       specify the public network URL for the HMR client
  --skip-plugins comma-separated list of plugin names to skip for this run

https://cli.vuejs.org/guide/cli-service.html#using-the-binary

但是在 web-pack 的情况下，你必须明确指定默认主机是localhost。

        var options = _.merge(
            {
                port: 8080,
                host: "localhost",
                keepalive: false,
                contentBase: ".",
           ...
           }

web-pack-default-host

【讨论】：