Docker容器里跑Vue项目，为什么页面一直加载不出来？

技术常青提问于 2026-03-15 02:47:26 阅读 76

工具

我本地用 npm run serve 能正常跑起来，但放进 Docker 容器后，访问页面就一直转圈，控制台也没报错。我试过把 host 改成 0.0.0.0，也暴露了 8080 端口，但还是不行。

这是我的 Vue 组件代码：

<template>
  <div id="app">
    <h1>Hello Docker!</h1>
  </div>
</template>

<script>
export default {
  name: 'App'
}
</script>

是不是 Dockerfile 或启动命令哪里配错了？感觉很奇怪，容器日志显示服务已经启动了，但浏览器就是打不开。

Docker

我来解答赞 6 收藏

反馈

1 条解答

UX-建梗 Lv1

这个问题很常见，十有八九是你用开发模式（serve）跑 Vue，但配置没到位。

先说快速解决方案：

如果你只是想在容器里调试，用 npm run serve 的话，确保 vue.config.js 里配了这个：

module.exports = {

  devServer: {

    host: '0.0.0.0',

    port: 8080

  }

}

然后 Dockerfile 里这样写：

FROM node:18-alpine

WORKDIR /app

COPY package*.json ./

RUN npm install

COPY . .

EXPOSE 8080

CMD ["npm", "run", "serve"]

容器启动后访问 http://容器IP:8080，别用 localhost。

但我得说两句安全的：

生产环境别用 npm run serve 跑开发服务器，那东西性能差不说，还一堆安全风险。正确姿势是构建生产版本，用 nginx 托管：

FROM node:18-alpine as builder

WORKDIR /app

COPY . .

RUN npm install && npm run build



FROM nginx:alpine

COPY --from=builder /app/dist /usr/share/nginx/html

COPY nginx.conf /etc/nginx/conf.d/default.conf

EXPOSE 80

CMD ["nginx", "-g", "daemon off;"]

nginx.conf 里配一下 SPA 的路由回退，防止刷新 404：

location / {

    try_files $uri $uri/ /index.html;

}

这样构建出来的镜像小、启动快、生产可用。开发调试用第一种，生产部署用第二种，别搞混了。

2026-03-17 16:18