使用docker-compose容器化Vue-cli应用后无法通过localhost访问页面

• Vue CLI 开发服务器默认绑定容器内的127.0.0.1地址，该地址仅支持容器内部访问，宿主机的外部请求无法转发到该绑定地址。
• 启动命令参数顺序错误：--service-ports是docker-compose run的专属参数，必须放在服务名之前，你放在命令末尾会被识别为npm run serve的参数，完全不生效，从docker ps的输出可以看到运行中的容器PORTS栏为空，就是端口未映射的直接证明。

步骤1：修改Vue开发服务绑定地址，二选一即可 #

• 方案1：修改Vue项目package.json中的scripts配置，给serve命令追加host参数：

  "scripts": {
    "serve": "vue-cli-service serve --host 0.0.0.0",
    // 其余配置保持不变
  }
  

• 方案2：在Vue项目根目录新建/修改vue.config.js，添加devServer配置：

  module.exports = {
    devServer: {
      host: '0.0.0.0'
    }
  }
  

步骤2：修正启动命令参数顺序 #

执行以下命令启动服务即可：

docker-compose run --rm --service-ports npm run serve

可选优化 #

如果不想每次启动都输入长参数，可以在docker-compose.yml的npm服务配置下追加command: ['run', 'serve']，之后直接执行docker-compose up npm即可自动映射端口启动服务。

修改完成后再次启动服务，通过docker ps可以看到容器PORTS栏出现0.0.0.0:8080->8080/tcp的映射记录，此时即可通过宿主机浏览器访问http://localhost:8080。

内容的提问来源于stack exchange，提问作者Alberto